Using vue-router in app.vue, I defined the two components as shown below:
<div class='app'>
<div class='nav'>
<router-link to='/a'>to A component</router-link>
<router-link to='/b'>to B component</router-link>
</div>
<div class='content'>
<router-view></router-view>
</div>
</div>In app.vue, I attempted to capture an event containing an object emitted from A component and then pass that object from app.vue to B component.
The code snippet is as follows:
//script in A component
data () {
toModify (good) {
console.log(good) // {'name': 'mike'}
this.$emit('tomodify', [good])
}
} <!-- A component -->
<button class="modifyBtn" @click="toModify(good)">Modify</button> //script in app.vue
methods: {
sendData (good) {
this.agood = good
console.log(this.agood) // undefined
}
} <!--app.vue-->
<div class="view-wrapper">
<router-view @tomodify="sendData(good)"></router-view>
</div>However, in app.vue, I am able to receive the event but not the object from A component.