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

Vue.js 3 this.$root.$on is not a function(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实例方法

这篇关于Vue.js 3 this.$root.$on不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！