this.$emit vs. this.$root.$emit, best practice in vuejs

user_1120487 0
Viewed 3498

I have vue2 components that are added and removed with v-if. In some cases I communicate between them with $emit from the sender, and $on in the receiver.

I've been using this.$root.$emit to broadcast custom events and this.$root.$on to handle the events. I've discovered using this.$root.$on requires this.$root.$off (from beforeDestroy), otherwise the removed component may attempt to handle it, and bad things happen.

I have two questions:

  1. What's the difference between this.$root.$emit and this.$emit?
  2. If I use this.$on, do I also have to pair it with this.$off? Or will the handler automatically go "off" when the component is removed?
vuejs2 vue.js event-handling
1 Answers
  1. What's the difference between this.$root.$emit and this.$emit?

this.$root gets the root component instance (usually App.vue), so this.$root.emit emits an event from the root component.

this.$emit simply emits an event from the current component.

  1. If I use this.$on, do I also have to pair it with this.$off? Or will the handler automatically go "off" when the component is removed?

this.$off is not needed. Yes, the handler will automatically be removed when the component is destroyed.

user_62771510
Related