首页 / JAVASCRIPT / javascript-有没有一种方法可以检测是否将作用域内的插槽传递到组件中？

javascript-有没有一种方法可以检测是否将作用域内的插槽传递到组件中？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-有没有一种方法可以检测是否将作用域内的插槽传递到组件中？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2304字，纯文字阅读大概需要4分钟。

内容图文

我有一个嵌套在几层组件中的组件.有作用域的插槽可以向下传递到此组件.我想检测出何时不是.

例：

Vue.component("parent", {
    template: `
        <child>
            <template slot="expand" slot-scope="{data}" v-if="$scopedSlots.expand">
                <slot name="expand" :data="data"></slot>
            </template>
        </child>
`,
});

Vue.component("child", {
    template: `
        <div>
            <slot name="expand" :data="1"></slot>
            <div @click="$scopedSlots.expand && log()">Child</div>
        </div>
`,
    methods: {
        log() {
            console.log(this.$scopedSlots.expand);
            console.log("This shouldn't work");
        }
    }
});

new Vue({
    el: "#app",
    template: `<parent></parent>`,
})

CodePen

在此示例中,作用域槽从未从根组件传递到< parent>.结果,我会认为$scopedSlots.expand和< parent>中的v-if会被两者都是虚假的,因此不会将任何插槽传递给< child&gt ;,并且单击不会执行任何操作. 但是,这似乎是错误的,原因有两个：
>由于$scopedSlots.expand是作为函数存储在内部的,因此它将始终评估为真实,如您在CodePen控制台中所见.
>看起来即使< template" s始终呈现v-if =“ false”.因此,即使$scopedSlots.expand在< parent>内被评估为虚假,一个空的插槽仍将传递给< child&gt ;,而$scopedSlots.expand在< child>内.无论如何都会认为是真实的.

有没有办法使这项工作？

我知道我可以通过传递一个布尔型道具来完成此操作,该道具会说是否处理点击.我试图找出是否有可能从广告位本身确定.

解决方法:

我以前曾被打过,这很烦人.

Vue模板编译器将对此进行编译

<template v-if="false"/>

本质上

vm._e()

其中_e是internal helper method,即createEmptyVNode.因此,我们知道马上就要有空的vnode而不是虚假的值了.

如果我们通过查看此模板的编译代码进行进一步调查

<child>
  <template slot="expand" slot-scope="scope" v-if="false"/>
</child>

我们得到了这段代码(为简化说明,只显示了相关内容)

_c('child', {
  scopedSlots: {
    expand(scope) {
      return undefined
    }
  }
})

总结一下：v-if =“ false”并不意味着将省略作用域插槽功能,而是提供该功能,但在调用时将返回未定义.因此,在子组件中,可以预期$scopedSlots.expand存在,但是在调用时将返回未定义.

AFAIK没有简单的方法来处理此问题.您的示例的快速“修复”将是

<div @click="$scopedSlots.expand() && log()">Child</div>
                                ^^

但要小心

>您的父组件是否能够处理不存在的{data}的slot-scope =“ {data}”？最好使用实际范围数据调用$scopedSlots.expand(scope).
>调用$scopedSlots.expand()并在渲染周期中多次丢弃潜在的真实结果可能是性能问题.

FWIW通过将v-if和slot分隔到单独的< template>节点：

<template v-if="$scopedSlots.expand">
  <template slot="expand" slot-scope="{data}">
    <slot name="expand" :data="data"/>
  </template>
</template>

内容总结

以上是互联网集市为您收集整理的javascript-有没有一种方法可以检测是否将作用域内的插槽传递到组件中？全部内容，希望文章能够帮你解决javascript-有没有一种方法可以检测是否将作用域内的插槽传递到组件中？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/668858.html

来源：【匿名】