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

Question

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

在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)
}

这将起作用，因为您的混合已直接注入到Parent.vue中，因此“父”组件本身将发出事件。但是，如果您将mixin注入了更深一层的“父”组件中（“父”>“子”），则需要发出以下命令：

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

$parent使您的发射水平更高。

您也可以使用$root实例，而不是使用事件总线，因此必须像this.$root.$on一样监听它，并从mixin this.$root.$emit()发出它