Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/422.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在插槽组件上切换v-if？_Javascript_Vue.js_Vuejs2_Vue Component - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 在插槽组件上切换v-if？

Javascript 在插槽组件上切换v-if？

javascript vue.js vuejs2

Javascript 在插槽组件上切换v-if？,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,我试图使用intersectionObserver来防止加载组件，直到它们滚动到视图中为止，如下所示： 用法示例： <lazy-component> <newsletter slot-scope="{}"></newsletter> </lazy-component 如果我理解正确，您可以通过将visible作为数据传递到插槽来完成此操作 LazyComponent.vue <template> <span>

我试图使用
intersectionObserver
来防止加载组件，直到它们滚动到视图中为止，如下所示：

用法示例：

<lazy-component>
    <newsletter slot-scope="{}"></newsletter>
</lazy-component



如果我理解正确，您可以通过将
visible
作为数据传递到插槽来完成此操作

LazyComponent.vue


<template>
    <span>
        <slot v-if="visible"></slot>
    </span>
</template>



<template>
    <span>
        <slot :visible="visible"></slot>
    </span>
</template>






使用LazyComponent


<lazy-component>
    <newsletter slot-scope="{visible}" v-if="visible"></newsletter>
</lazy-component