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

问题描述

我有一个像{p>

this.$root.$emit('some-root-event')

其中的另一个组件应该捕获此事件，但会引发错误：

this。$ root。$ on不是函数

第二个组件的代码如下

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

有人可以帮我了解问题出在哪里吗？

解决方法

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

他们的动力：

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

,

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

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