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
实例方法
相关文章