使用 vm.$on 监听 vue.js 2.0 中子进程发出的事件

Question

我已经阅读了关于事件的 vue.js 事件部分，但它似乎只给出了如何使用 html 中的 vm.$on 处理程序来监听事件的示例。在这与 2.0 的新变化之间，我不确定如何简单地从子级 -> 父级传输事件。

我需要传输一个事件，因为在父母收到后我想将它广播给另一个孩子。

我正在使用单页组件，这是我的设置：

// parent
export default {
  mounted: function () {
    this.$on('myEvent', function (msg) {
    console.log('caught in parent', msg)
  });
 },
 components: {
  'child': child,
 },
}

// child
this.$emit('myEvent', true)

请问如何在父虚拟机上接收此事件？注意，我不想在 html 中使用 $on 。我希望事件接收逻辑在它应该在的 vm 中。

谢谢，

Answer 1

Vues$emit 上的文档不是很全面，但是，有几种方法可以做到这一点。首先，如果你想使用this.$on()，你必须在你想发送消息的vue模型上$emit，所以如果你从一个组件发送，你可以使用：

this.$parent.$emit('myEvent',true);

但是，如果您有很长的父链，这可能会出现问题，因为您必须在子链上 $emit，所以在这种情况下，您可以使用 Vue 实例作为总线：

// In the root as a global variable so all components have access
var bus = new Vue({});

或者，如果您使用的是单个文件组件。

window.bus = new Vue({});

然后在接收器中：

bus.$on('myEvent',() => {
   // Do stuff
});

在发射器中：

bus.$emit('myEvent',true);

最后，如果您发现 app 对于简单的总线来说过于复杂，那么您可以使用 vuex：

https://vuex.vuejs.org/en/index.html