CODEWITHSUNDEEP
vuejs2vue-component
Alocus
Alocus

Reputation: 1900

Vuejs from router-view to outside component

I am trying to pass data from a <router-view> to an outer component. I found an example of passing from child to parent, but I am not sure if a <router-view> is considered a child. Is it possible to pass data from within a <router-view> to the outer component using this method?

I have a ChildView, which I have emit an event to pass a value to the TopNavSection.

This is the structure I have:

enter image description here

I sent the event in ChildView:

 mounted() {
  this.$emit('update-back-link', "value");
},

But my event is not being handled via this code in MainContainer.vue.

<top-nav-section @update-back-link="handleBackLinkUpdate"></top-nav-section>

methods: {
  handleBackLinkUpdate: function (value) {
    debugger;
    console.log(value);        
  },
},

Please kindly let me know whether I am on the right track as I don't know why the handler is not being triggered. Thanks.

Upvotes: 3

Views: 1776

Answers (1)

thanksd
thanksd

Reputation: 55644

The ChildView component is emitting the update-back-link event, not the TopNavSection component. But, you have the event handler on the <top-nav-section> tag. TopNavSection never emits a update-back-link event, so its handler is never fired.

You should move the event handler to the tag for the ChildView component (which, since you are using ChildView as the route component will be <router-view>):

<router-view @update-back-link="handleBackLinkUpdate"></router-view>

Upvotes: 5

Related Questions