Question

我有一个父组件和一个子组件。在我的父组件中，我在span上有一个事件：

<span @click="toggle(model.id)" class="open-folder">[{{open ? '-' : '+'}}]</span>

会触发toggle函数

methods: {
        toggle: function(id_epic) {
            this.open = !this.open;

            this.$broadcast('loadTasks', id_epic);
        }
    },

在此函数中，我使用loadTasks参数从子组件调用id_epic方法。

父母可以将n个孩子链接到它，但我只想解雇第一个子方法而不是全部。当我点击跨度时，它会触发父树的所有n个孩子的事件。

编辑：父项及其子项是递归生成的，因此子项也可以是父项。（如文件夹结构）

我该如何解决这个问题？谢谢。

Answer 1

$broadcast用于将事件发送到子组件。在您的父组件中，您可以从loadTasks方法触发事件toggle。这很好。

根据您的情况，您parameter发送了id_epic id

现在在您的子组件中，您将需要这样的东西。您需要在您的子组件中发送events : { 'loadTask' : function(param) { //check for the id_epic here } }

compression()

编辑：父母及其子女是递归生成的，所以孩子也可以是父母自己的父母。（就像文件夹结构一样）

你也应该重新考虑那个部分，如果你有太多的嵌套组件，事情很容易就会失控。

Answer 2

您应该能够通过在子侦听器中使用第二个参数来停止事件的传播。第二个参数传递给您可以调用stopProgation()的事件对象，并阻止其他子项也接收广播事件。

考虑将以下代码添加到您的子侦听器。

events:{
    'loadTask': function(param,event){
        event.stopPropagtion();
        // Handle the param as needed.
    }
}

当然，这个事件处理系统仅适用于Vue.js 1.0，因为Vue.js 2.0+事件广播和调度已经折旧，有利于Vuex等数据存储。所以你可能想考虑使用一种升级兼容的方法。

Answer 3

您可以尝试使用this.$children[0].$emit()将事件发送到第一个子实例。虽然使用更明确的方案并让子项向父项注册处理程序可能会更好，反之亦然。

从父母到孩子的广播事件在Vue.js中触发所有父母的孩子

3 个答案: