组件中的 $on 监听器可以监听来自 mixin 的 $emit 吗？答案

【问题标题】：Can $on listener in a component listen for an $emit from mixin?组件中的 $on 监听器可以监听来自 mixin 的 $emit 吗？
【发布时间】：2018-03-30 09:53:37
【问题描述】：

我希望我的全局 mixin 能够将数据广播到各种组件。尝试从组件内的已创建（或已安装）事件中侦听自定义事件似乎不起作用。例如。

在混音中...

methods:  
   foo: function() {
     this.$emit('my-change','bar')
   }

在组件中...

created () {
  this.$on('my-change', function (e) {
    // do something 
  })
}

这可能吗？

【问题讨论】：

应该可以使用global event bus
好的，谢谢@JacobGoh，但是可以从全局混合中发出吗？
如果您使用的是事件总线，可以。 $emit/$on 用于孩子与父母之间的交流。

标签： vue.js vuejs2 vue-component

【解决方案1】：

这完全取决于组件的嵌套级别，假设您有以下组件结构，父组件和子组件（当然还有 mixin）。

Parent.vue（你在这里监听传入的事件变化）：

private created(): void {
  this.$on('event', (value: boolean) => {
    console.log(value)
  })
}

并且你已经在父组件中注入了你的 mixin：

private someRandomMethod(): void {
  this.$emit('event', true)
}

这会起作用，因为你的 mixin 是直接注入到 Parent.vue 中的，所以“Parent”组件本身会发出一个事件。但是，如果您在“父”组件中注入了 mixin，更深一层（父 > 子），您需要像这样发出：

this.$parent.$emit('event', true)

$parent 让你的发射更高一级。

除了使用事件总线，你还可以使用$root 实例，所以你必须像this.$root.$on 一样监听它，并从mixin this.$root.$emit() 发出它

【讨论】：