1

Let's say I have 3 components in a parent-child relationship.

Component1 is a parent of Component2 and Component2 is a parent of Component3.

Component3 emits an event1. Typically, event1 is handled in Component2 but in my particular case, I want to handle it in Component1.

Backstory

The reason why I have set up my components this way, is because Component2 is a generic component whose content is Component3. Tomorrow, I can create another Component4 and pass it to Component2 as a prop. Any event emitted from Component4 or Component3 needs to be accessed from an event handler in Component1's template like

<template>
<component2 @event1="doSomething"></component2>
</template>
Bert
  • 80,741
  • 17
  • 199
  • 164
Divyanth Jayaraj
  • 950
  • 4
  • 12
  • 29
  • If you have a generic component that will be use by many components see mixin : https://vuejs.org/v2/guide/mixins.html – Happyriri Mar 29 '17 at 17:58
  • Yes, but those examples are in regular JS format while mine is in `.vue` – Divyanth Jayaraj Mar 29 '17 at 18:01
  • http://stackoverflow.com/questions/42615445/vuejs-2-0-emit-event-from-grand-child-to-his-grand-parent-component – Bert Mar 29 '17 at 18:02
  • 1
    You might consider passing your component into [slots](https://vuejs.org/v2/guide/components.html#Single-Slot) rather than as a prop. – Roy J Mar 29 '17 at 18:30
  • 1
    You could try Centralized State Management using [vuex](https://github.com/vuejs/vuex) – Amr Aly Mar 29 '17 at 19:33
  • @RoyJ, I tried using slots but I was only able to insert templates that way. I had generic and specific component methods as well, so slots weren't suitable. – Divyanth Jayaraj Mar 29 '17 at 21:18

0 Answers0