使用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)

我怎样才能在父母vm上收到这个活动？注意,我不想在html中使用$ on.我希望事件在vm中接收逻辑.

谢谢,

Answer 1

Vues文档$emit不是很全面,但是,有几种方法可以做到这一点.首先$emit,如果要使用this.$on(),则必须在要发送消息的vue模型上,因此如果要从组件发送,则可以使用以下内容向直接父级发送:

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