Vue组件中的Vue组件，范围似乎存在冲突

Question

我有一个简单的下拉组件，它仅允许我隐藏和显示一些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在click事件中进行切换而不是功能？组件：<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>