[Vuejs]-Hierarchical Component not sending emit in Vue js

by

0👍

So I have figured out the problem… We need to replace this.$emit() with this.$parent.$emit()

Here is the change- 

addState() {
      console.log("Adding State"); //Prints this message to console
      this.$parent.$emit("add-state");
    },

Hopefully this resolved my issue.

0👍

You can use v-on="$listeners" to pass emits on levels above within the depths https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components it would just forward them to the parent.

However in nested scenarios it is more convenient using store (vuex) and assign a property then watch property changes from wherever you would like to notice its change. If you use vuex: https://vuex.vuejs.org/api/#watch store properties can be watched.

Leave a comment