时间戳

首页 > 解决方案 > Vue.js 3 this.$root.$on 不是函数

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

问题描述

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

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

标签： javascriptvue.jseventsvue-componentvuejs3

解决方案

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

他们的动机：

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

推荐阅读