this.$emit 和 this.$root.$emit 在 vuejs 中的最佳实践是什么？

Question

我有一些使用v-if添加和删除的vue2组件。 在某些情况下，我使用发送器中的$emit和接收器中的$on进行通信。

我一直在使用this.$root.$emit来广播自定义事件，并使用this.$root.$on处理事件。 我发现使用this.$root.$on需要在beforeDestroy中使用this.$root.$off，否则已移除的组件可能会尝试处理它，并且会出现问题。

我有两个问题：

1. this.$root.$emit和this.$emit之间有什么区别？
2. 如果我使用this.$on，是否也必须配对使用this.$off？或者当组件被删除时，处理程序会自动“关闭”？

- shs

---

提醒一下，通常情况下根发射器都不是一个好主意，除非有特殊情况。事实上，Vue3已经移除了对其的支持。我甚至不确定为什么你需要$on，因为即使这些也几乎是边缘情况。 - Cristiano Soleti

@CristianoSoleti 真的吗？$on 在边缘情况下如何使用？我经常使用它们来对其他 Vue 组件中的更改做出反应。我错过了什么吗？除此之外，你还能用什么方式在组件之间进行通信？ - Dominic

使用Vue建议的监听器。https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events - Cristiano Soleti

Answer 1

1. 什么是 this.$root.$emit 和 this.$emit 的区别？

this.$root 获取根组件实例（通常是 App.vue），因此 this.$root.emit 会从根组件触发一个事件。

this.$emit 只会从当前组件触发一个事件。

2. 如果我使用 this.$on，是否也需要搭配 this.$off 使用？或者当组件被移除时，处理程序会自动离开 "off" 状态吗？

不需要使用 this.$off。是的，当组件被销毁时，处理程序将自动被删除。

- tony19