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

Question

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

在混合...

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

在组件...

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

这可能吗？

Answer 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()