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

Question

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

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 1

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

他们的动机：

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