Vue.js 3 this.$root.$on 不是函数答案

【问题标题】：Vue.js 3 this.$root.$on is not a functionVue.js 3 this.$root.$on 不是函数
【发布时间】：2020-12-16 17:02:33
【问题描述】：

我有一个组件触发this.$root.$emit('some-root-event') like

clickHandler: function() {
    this.$root.$emit("some-root-event", "aaaaaaaaaaaaaaaaaaaaaa");
    console.log('About $root.$emit')
}

内部的另一个组件应该捕获此事件，但会抛出一个错误：

this.$root.$on 不是函数

第二个组件的代码是这样的

mounted() {
    this.$root.$on("some-root-event", (data) => {
        console.log("About listener catch $root some-root-event"); console.log(data)
    })
}

谁能帮我看看问题出在哪里？

【问题讨论】：

查看answer
为什么这不起作用？
我不知道，我之前也遇到过同样的问题，为了避免我使用事件总线在组件之间发出事件
再次您好，请查看answer 以备将来需要

标签： javascript vue.js events vue-component vuejs3

【解决方案1】：

在 Vue 3 中，您可以为此使用外部库：https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax

Vue 3 中不再有 $root 空间，因此您必须将事件总线模式与文档中提到的库一起使用。

【讨论】：

【解决方案2】：

根据 Vue.js 3 中的this RFC，他们删除了$on、$once 和$off 实例方法：

他们的动机：

Vue 1.x 实现了类似于 AngularJS 的组件事件系统，使用 $dispatch 和 $broadcast，其中树中的组件可以通过在树上上下发送事件来进行通信。在 Vue 2 中，我们删除了 $dispatch 和 $broadcast 以支持更多状态驱动的数据流（props down，event up）。使用 Vue 2 的 API，$emit 可用于触发由父组件声明式附加的事件处理程序（在模板或渲染函数中），但也可用于触发通过事件发射器 API 强制附加的处理程序（$on，@987654330 @ 和 $once)。这实际上是一个重载：完整的事件发射器 API 不是典型的组件间数据流的一部分。它们很少使用，并且确实没有充分的理由通过组件实例公开它们。因此，此 RFC 建议删除 $on、$off 和 $once 实例方法

【讨论】：