javascript-Vue组件内的Vue组件,范围似乎冲突

2019-12-10 23:39:09 阅读：228 来源： 互联网

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

但是,如果我在内部使用相同的组件,则单击“测试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>

为什么是这样？另外,我应该能够在click事件中执行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>

标签：vue-js,javascript
来源： https://codeday.me/bug/20191210/2104853.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Vue组件内的Vue组件,范围似乎冲突