Vue.js vue组件未传递事件

我有三个嵌套组件

<parent @event="handle">
  <inbetween @event="$emit('event')">
    <child> // emits event
    </child>
  </inbetween>
</parent>

//发射事件

因此，当一个子系统发出事件时，我必须将恼人的部分

@event=“$emit（'event'）”

添加到中间的组件中，否则父系统不会收到任何事件

---

我希望它不应该那样工作。我想知道它有什么问题？

这实际上是故意的。原因是，当查看一个组件的代码时，您看到它正在侦听一个事件，然后您可以查看模板以查看该事件的来源。如果事件可以到达任意深度的组件，则很难确定事件是如何触发的以及从何处触发的

---

然而，Vue过去有一种方法可以做您想做的事情，即通过方法

$broadcast

和

$dispatch

，由于这里所述的原因，它们最终被删除

Vue自定义事件不会冒泡

在复杂情况下处理祖先/兄弟姐妹通信的推荐方法是使用Vuex。如果您有简单的需求，可以创建Vue实例用作事件中心

您将创建一个全局变量：

var eventHub = new Vue(); // use a Vue instance as event hub

要发出将在任何组件中使用的事件，请执行以下操作：

eventHub.$emit('myevent', 'some value');

并且，要在任何组件中再次收听该事件，请执行以下操作：

eventHub.$on('myevent', (e) => {
    console.log('myevent received', e)
});

演示：

var eventHub=new Vue（）；//将Vue实例用作事件中心
Vue.component（'父'{
模板：“#父tpl”，
创建（）{
eventHub.$on（'event'，（e）=>{
log（'在父级接收的事件！值：'，e）；
});
}
});
Vue.组件（'中间'{
模板：“#中间第三方物流”
});
Vue.component（'子'{
模板：“#子tpl”，
方法：{
emit事件（）{
eventHub.$emit（'event'，123）；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
消息：“您好，Vue.js！”
}
})

我是孩子
触发事件
{{message}}

是的，它应该是这样工作的。事件仅从子事件到父事件，而不是从子事件到父事件。因此，您必须同时从子组件和中间组件发出事件

如果要避免此方法，可以使用事件总线：

---

alligator.io/vuejs/global event bus

是的，它应该是这样工作的。事件只能从子级传递到父级，而不能从子级传递到父级。因此，您必须同时从子组件和中间组件发出事件。如果要避免这种方法，可以使用事件总线：为什么要使用事件？为什么每个人都要参加各种活动？请停止使用事件@bbsimonbb事件有什么不好？你有一个劳斯莱斯mvvm库，它会“自动”同步你的视图和模型，所以使用一个模型。嗨，在树视图的嵌套组件中。我只需要向上一级发送消息。比如从孩子到直系父母。事件是否会以这种关系工作，或者我仍然需要使用其他解决方案，如eventBus或vuex。感谢您抽出时间回答查询。如果事件只需要发送给其直接父级，您可以使用事件。不需要使用EventBus或VuexHi，我的问题是我使用的是嵌套组件。基本上，我正在尝试创建一个树状视图。对于删除操作，需要在上面一步发送删除消息。这样我就可以拼接出节点本身。我在阅读后注意到，据说事件可以在一个层面上起作用。从孩子到父母。但在嵌套的情况下，它不起作用。这是我的JSFIDLE示例。请建议最好的处理方法。谢谢