Переключить v-if на компонент слота?
Я пытаюсь использовать intersectionObserver, чтобы предотвратить загрузку компонентов до тех пор, пока они не появятся в поле зрения следующим образом:
Пример использования:
<lazy-component>
<newsletter slot-scope = "{}"></newsletter>
</lazy-component
Ленивый компонент - это отдельный файловый компонент, который содержит этот шаблон:
LazyComponent.vue
<template>
<span>
<slot v-if = "visible"></slot>
</span>
</template>
Компонент информационного бюллетеня будет отображаться, если я не добавлю к нему slot-scope, потому что он сначала отображается, а только затем вставляется в слот с помощью оператора v-if.
На этом этапе компонент был загружен, и если бы это был компонент async, его Javascript также был бы загружен. Это то, что я пытаюсь предотвратить.
Хотя slot-scope работает, это кажется довольно хакерским и непонятным для других пользователей.
Можно ли установить v-if на false на компоненте в моих шаблонах и заставить lazy-component каким-то образом вручную установить v-if на true?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понял, вы можете сделать это, передав visible в качестве данных в слот.
LazyComponent.vue
<template>
<span>
<slot :visible = "visible"></slot>
</span>
</template>
Использование LazyComponent
<lazy-component>
<newsletter slot-scope = "{visible}" v-if = "visible"></newsletter>
</lazy-component