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

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用于将事件发送给子组件。在您的父组件中，您将触发toggle方法中的事件loadTasks。这很好。

你在你的子组件沿事件发送parameter，你的情况id_epic

现在，你需要这样的事情。您需要获取您在子组件中发送的id。

events : { 
    'loadTask' : function(param) { 
       //check for the id_epic here 
    } 
} 

编辑：父母和它的孩子们递归产生，因此孩子也可以在它自己的父（就像一个文件夹结构）

你也应该重新思考。那部分，如果你有太多的嵌套组件，事情可能会轻易失控。

Answer 2

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

Answer 3

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

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

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

当然本系统的事件处理是只对Vue.js 1.0如Vue.js 2.0+事件广播和调度已经有利于数据存储器的贬值如Vuex。所以你可能要考虑使用一种将升级兼容的方法。