我有一个组件,嵌套在几个层次的组件中。可以将作用域插槽传递到此组件中。我想检测它不存在时。
示例:
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>`,
})
在这个例子中,作用域插槽从根组件没有传递到<parent>
。因此,我原本认为$scopedSlots.expand
和<parent>
中的v-if
都是假值,所以不会向<child>
传递插槽,点击也不会有任何效果。
然而,这种想法是错误的,有两个原因:
- 由于
$scopedSlots.expand
在内部被存储为函数,它总是求值为真值,您可以在CodePen的控制台中看到。 - 似乎
<template>
始终会渲染,即使使用v-if="false"
。因此,即使在<parent>
内$scopedSlots.expand
求值为假值,仍会向<child>
传递一个空插槽,并且<child>
内的$scopedSlots.expand
仍将求值为真值。
有没有办法让它工作?
我知道我可以通过传递一个布尔属性来实现是否处理点击的功能。我正在尝试弄清楚是否可以从插槽本身确定。
<slot name="expand" :data="data"></slot>
作为<template slot="expand">
的子元素,您可以使用this.$parent.$slots.expand
。 - Sphinxthis.$refs.test
为false,则为真。 - Sphinx$refs.test
将无法定义。 - Behind The Math