从家长到孩子的广播事件触发所有家长'；Vue.js中的儿童

我有一个父组件和一个子组件。 在父组件中，我在

span

上有一个事件：

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

在这个函数中，我使用

id\u epic

参数从子组件调用

loadTasks

方法

父级可以有链接到它的

n

子级，但我只想启动第一个子级方法，而不是全部。 当我点击span时，它为父树的所有

n

子级触发事件

编辑：父级及其子级是递归生成的，因此子级本身也可以是父级。（类似于文件夹结构）

我怎样才能解决这个问题？

---

谢谢。

$broadcast

用于将事件发送到子组件。在父组件中，您正在通过

切换

方法触发事件

loadTasks

。这很好

您正在事件中发送一个

参数

，在您的案例中是

id\u epic

现在在您的子组件中，您将需要这样的内容。您需要获取要在子组件中发送的

id

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

编辑：父级及其子级是递归生成的，因此子级本身也可以是父级。（类似于文件夹结构）

---

您还应该重新考虑这一部分，如果嵌套组件太多，事情很容易失控。

$broadcast

用于向子组件发送事件。在父组件中，您正在通过

切换

方法触发事件

loadTasks

。这很好

您正在事件中发送一个

参数

，在您的案例中是

id\u epic

现在在您的子组件中，您将需要这样的内容。您需要获取要在子组件中发送的

id

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

编辑：父级及其子级是递归生成的，因此子级本身也可以是父级。（类似于文件夹结构）

---

您还应该重新考虑这一部分，如果嵌套组件太多，事情很容易失控。

您可以尝试使用

this.$children[0]。$emit（）

将事件发送到第一个子实例。不过，最好使用更明确的方案，让子对象向父对象注册处理程序，反之亦然。

您可以尝试使用

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等数据存储。因此，您可能需要考虑使用一种升级兼容的方法。

您应该能够通过在子侦听器中使用第二个参数来停止事件的传播。第二个参数被传递给事件对象，您可以向其调用

stopProgation（）

，并防止其他子对象也接收广播的事件

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

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

---

当然，此事件处理系统仅适用于Vue.js 1.0，因为在Vue.js 2.0+中，事件广播和调度已被贬值，取而代之的是Vuex等数据存储。因此，您可能需要考虑使用兼容升级的方法。

事件广播和调度不受数据存储的限制，而是消息泵架构，每个组件在上有<代码> $，<代码> $OF/<代码>，<代码> $$ /代码>，和<代码> $EMIT < /C>函数来处理本地事件。建议使用创建空的全局Vue实例来进行解耦事件处理。为正确的Vuejs 1.0解决方案提供+1，尽管事件广播和调度不是为了数据存储而被弃用的，而是一种消息泵体系结构，但每个组件都有一个处理本地事件的

$on

、

$off

、

$one

和

$emit

函数。建议使用创建空的全局Vue实例来进行解耦事件处理。但对于正确的Vuejs 1.0解决方案，给出+1