1

For example, there is Header component and you import it in layout/main.vue.

Then, you created a method which is like this.$emit('fromHeader', { //somevalue } in Header component.

Here is my question. You have pages/index.vue and you use main.vue as layout. Is it possible to listen fromHeader event from the Header component in the pages/index.vue? I've already tried but it seems we can't. If so, what means do you implement if you want to listen to event from the component in the layout?

I'm wondering I should just import Header components in pages/index.vue and do not use layout to do this.

db099u
  • 505
  • 1
  • 5
  • 12

1 Answers1

1

You can only listen for Vue events in the parent of the component that emits them. In your example, main.vue is the parent of Header. index.vue could listen for events emitted by main.vue, but not for events emitted by Header.

See VueJs 2.0 emit event from grand child to his grand parent component

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • Thank you for your answer. But as I said, it did not work in my try. index.vue cannot listen the event from main.vue, which means pages cannot listen event from layout I think. So I'm looking for alternative way or give up importing header in layout but in page directly. – db099u Nov 02 '18 at 04:36