我有一个简单的下拉组件,它只允许我隐藏和显示一些 HTML,它非常基础。
但是,如果我在自身内部使用相同的组件,单击 Test 2
下拉开关将折叠第一个下拉菜单...
<dropdown>
<li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay()" :class="{ active: display }">
Test
<ul>
<dropdown>
<li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay()" :class="{ active: display }">
Test 2
</li>
</dropdown>
</ul>
</li>
</dropdown>
这是为什么?另外,我应该能够在点击事件中执行 display = !display
来切换它而不是一个函数?
组件:
<script>
export default {
props: [ 'expanded' ],
data: function() {
return {
display: !!(this.expanded)
}
},
render() {
return this.$scopedSlots.default({
display: this.display,
toggleDisplay: this.toggleDisplay
})
},
methods: {
toggleDisplay() {
this.display = !this.display;
}
}
}
</script>
最佳答案
这称为事件冒泡
( https://javascript.info/bubbling-and-capturing ) 并使用stopPropagation();
来防止它。
我删除了括号 (@click="toggleDisplay"
) 以自动设置 $event
。你也可以这样写:@click="toggleDisplay($event)"
。
Vue.component("dropdown", {
props: ["expanded"],
data: function() {
return {
display: !!this.expanded
};
},
render() {
return this.$scopedSlots.default({
display: this.display,
toggleDisplay: this.toggleDisplay
});
},
methods: {
toggleDisplay(e) {
e.stopPropagation(); // this line
this.display = !this.display;
}
}
});
new Vue().$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
<dropdown>
<li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay" :class="{ active: display }">
{{ display }}
Test
<ul>
<dropdown>
<li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay" :class="{ active: display }">
{{ display }}
Test 2
</li>
</dropdown>
</ul>
</li>
</dropdown>
</div>
关于javascript - Vue Component 中的 Vue Component,作用域似乎有冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55956037/