从父母到孩子的广播事件在Vue.js中触发所有父母的孩子
问题描述:
我有一个父组件和一个子组件。 在我父组件我有一个span
事件:从父母到孩子的广播事件在Vue.js中触发所有父母的孩子
<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
孩子的事件。
编辑:父母和它的孩子们递归产生,因此孩子也可以在它自己的父(就像一个文件夹结构)
我怎样才能解决这个问题? 谢谢。
答
$broadcast
用于将事件发送给子组件。在您的父组件中,您将触发toggle
方法中的事件loadTasks
。这很好。
你在你的子组件沿事件发送parameter
,你的情况id_epic
现在,你需要这样的事情。您需要获取您在子组件中发送的id
。
events : {
'loadTask' : function(param) {
//check for the id_epic here
}
}
编辑:父母和它的孩子们递归产生,因此孩子也可以在它自己的父(就像一个文件夹结构)
你也应该重新思考。那部分,如果你有太多的嵌套组件,事情可能会轻易失控。
答
您可以尝试使用this.$children[0].$emit()
将事件发送到第一个子实例。尽管可能会更好地使用更明确的方案,并让孩子向父母注册处理程序,反之亦然。
答
您应该能够通过使用子侦听器中的第二个参数来停止事件的传播。第二个参数传递给您可以调用stopProgation()
的事件对象,并阻止其他孩子也接收广播的事件。
考虑将以下代码添加到您的子侦听器。
events:{
'loadTask': function(param,event){
event.stopPropagtion();
// Handle the param as needed.
}
}
当然本系统的事件处理是只对Vue.js 1.0如Vue.js 2.0+事件广播和调度已经有利于数据存储器的贬值如Vuex。所以你可能要考虑使用一种将升级兼容的方法。
事件广播和调度并没有被弃用,而是采用了消息泵架构,每个组件都有一个'$ on','$ off','$ once'和'$ emit'函数来处理本地事件。创建空的全局Vue实例是解耦事件处理的推荐方法。 给出正确的Vuejs 1.0解决方案的+1 –