Javascript Vue组件在Vue组件中，作用域似乎相互冲突

我有一个简单的下拉组件，它只允许我隐藏和显示一些HTML，这是非常基本的

但是，如果我在其内部使用相同的组件，单击

test2

下拉切换将折叠第一个下拉列表

<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>

---

这称为

事件冒泡

（），为防止冒泡，请使用

stopPropagation（）

我已删除括号（
@click=“toggleDisplay”
）以自动设置
$event
。您还可以写：
@click=“toggleDisplay（$event）”


Vue.component（“下拉列表”{
道具：[“扩展”]，
数据：函数（）{
返回{
显示：！！this.expanded
};
},
render（）{
返回此值。$scopedSlots.default({
display:this.display，
toggleDisplay:this.toggleDisplay
});
},
方法：{
切换显示（e）{
e、 stopPropagation（）；//这一行
this.display=！this.display；
}
}
});
新Vue（）.$mount（#app”）


{{display}
试验


{{display}
测试2



该死，这是一个简单而基本的解决方案。我没有尝试过这一点，因为我不认为这会成为Vue中的一个问题
<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>