Sometimes, we want to emit event from grandchild to his grandparent component with Vue.js

In this article, we’ll look at how to emit event from grandchild to his grandparent component with Vue.js.

How to emit event from grandchild to his grandparent component with Vue.js?

To emit event from grandchild to his grandparent component with Vue.js, we call $emit in the grand child component.

Then in the parent component, we pass the events from the child to the grandparent with v-on="$listeners.

And then we listen to the event emitted from the grandchild component in the grandparent.

For instance, we write

Vue.component("grand-child", {
  //...
  methods: {
    emitToggleEvent() {
      this.$emit("toggle-value");
    },
  },
});

to call this.$emit in the grand-child component to emit the toggle-value event.

Then in the parent component of the grand-child, we write

Vue.component("child", {
  template: `<div class="child">
      <grand-child v-on="$listeners"></grand-child>
    </div>`,
});

to pass all events to the child‘s parent with v-on="$listeners".

Finally, in the parent component, which is the parent of the child component, we listen to the toggle-value event with

Vue.component("parent", {
  template: `div>
      <child @toggle-value="toggleValue"></child>
    </div>`,
  //...
});

Conclusion

To emit event from grandchild to his grandparent component with Vue.js, we call $emit in the grand child component.

Then in the parent component, we pass the events from the child to the grandparent with v-on="$listeners.

And then we listen to the event emitted from the grandchild component in the grandparent.