title: this.$emit vs. this.$root.$emit, best practice in vuejs
body: <p>I have vue2 components that are added and removed with <code>v-if</code>.  In some cases I communicate between them with <code>$emit</code> from the sender, and <code>$on</code> in the receiver.</p>
  <p>I've been using <code>this.$root.$emit</code> to broadcast custom events and <code>this.$root.$on</code> to handle the events.  I've discovered using <code>this.$root.$on</code> requires <code>this.$root.$off</code> (from <code>beforeDestroy</code>), otherwise the removed component may attempt to handle it, and bad things happen.</p>
  <p>I have two questions:</p>
  <ol>
  <li>What's the difference between <code>this.$root.$emit</code> and <code>this.$emit</code>?</li>
  <li>If I use <code>this.$on</code>, do I also have to pair it with <code>this.$off</code>?  Or will the handler automatically go &quot;off&quot; when the component is removed?</li>
  </ol>