javascript - 子组件发送给父组件，父组件更新所有子组件

Question

我正在尝试使用 vue js 2 创建一个包含可扩展项目的列表。这个想法是，当我单击一个项目时，我希望它展开(显示其内容)(如果它尚未展开)并关闭所有其他展开的元素。我创建了两个组件 expandable-panel 和 expandable-item。我可以在里面有多种类型的内容，所以我想使用插槽。

我的代码:

ExpandablePanel 组件:

<template>
    <div class="expandable-panel" @expanded="doStuff">
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    export default {
        methods: {
            doStuff: function() {
                alert('expanded');
            }
        }
     }
</script>

ExpandableItem 组件:

<template>
    <div class="expandable-item" @click="toggleExpand">
        <div class="expandable-item-header">
            {{ title }}
        </div>
        <div class="expandable-item-body" v-if="expanded">
            <slot></slot>
        </div>
    </div>
</template>
<script type="text/babel">
    export default {
        props: {
            title: String
            // expanded: {
            //     type: Boolean,
            //     default: true
            // }
        },
        data: function() {
            return {
                expanded: true
            }
        },
        methods: {
            toggleExpand: function() {
                this.expanded = !this.expanded;
                this.$emit('expand');
            }
        }
    }
</script>

还有我的 HTML 文件

<expandable-panel>
    <expandable-item title='title 1'>Lorem ipsum...</expandable-item>
    <expandable-item title='title 2'>Lorem ipsum...</expandable-item>
    <expandable-item title='title 3'>Lorem ipsum...</expandable-item>
</expandable-panel>

我的应用程序和组件是这样注册的:

Vue.component('expandable-panel',    require('./components/global/ExpandablePanel.vue'));
Vue.component('expandable-item', require('./components/global/ExpandableItem.vue'));
const app = new Vue({
    el: '#app'
});

问题: $emit 部分似乎没有到达父组件内的 @expanded="doStuff" 。 即使它到达那里，我如何正确切换扩展值？我可以为此使用 Prop 吗？

现在，它会切换每个元素，但我无法更新其他元素。 谢谢

Answer 1

这里父子之间有严格的关系，因此您可以通过 $parent 对象发出事件。

首先，在创建父对象时，使用 this.$on 监听事件:

Vue.component('parent', {
  template: `<div><slot></slot></div>`,
  created: function() {
    this.$on('event', function(message) {
        alert(message);
    })
  }
});

然后在您的子组件内使用 $parent.$emit 发出此事件

Vue.component('child', {
  template: `<button @click="$parent.$emit('event', 'From child')">I'm slot</button>`
});

这是工作演示:https://jsfiddle.net/rdjjpc7a/1754/