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

我有一个组件可以触发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)
    })
}

有人能帮我了解一下问题出在哪里吗?


解决方案

根据this RFC在Vue.js 3中移除了$on$once$off实例方法:

他们的动机:

Vue 1.x使用$dispatch$broadcast实现了类似于AngularJS的组件事件系统,其中树中的组件可以通过在树中上下发送事件进行通信。 在Vue 2中,我们删除了$dispatch$broadcast,取而代之的是更具状态驱动的数据流(道具向下,事件向上)。 使用Vue 2的API,$emit可以用来触发父组件声明性附加的事件处理程序(在模板或呈现函数中),但也可以用来触发通过事件发射器API($on,$off$once)强制附加的处理程序。这实际上是一个重载:完整的事件发射器API不是典型的组件间数据流的一部分。它们很少使用,实际上没有充分的理由让它们通过组件实例公开。因此,此RFC建议删除$on$off$once实例方法

相关文章