Hi Thin,
Thanks for your update.
Query: In my Vue app, I used <router-view> component that will display each of my views and Vue-Router only creates my component when end-user is accessing. On child component, end-user emits , then they go to another page the child component is not alive so it goes no where.
As per your last update, we assume AppMain component holds router-view and Load, KeepAlive components are loaded based on routing action. Now you want to show the Toast from routing action based rendered Load component.
As we state stated previous update of component interaction, we can show the toast message from Load component as follows
- We configured router-view and router-link in AppMain component page and binded loadClicked event in router-view initialization to capture the child component emit event
- Then onClick event handler emit appMainClicked event to parent component (Layout) to call show() method
|
<template>
<div class="app-main">
<br>AppMain
<br>
<br>
<router-link class="link" :to="{ path: '/load', query: { name: 'Foo' }}">Load</router-link>
<br>
<br>
<router-link class="link" :to="{ path: '/alive', query: { name: 'Foo' }}">KeepAlive</router-link>
<br>
<br>
<router-view @loadClicked="onClick"/>
</div>
</template>
<script>
export default {
name: "AppMain",
methods: {
onClick: function() {
this.$emit("appMainClicked", "");
}
}
};
</script>
|
- Load Component initialized using button and event binded for emit event to parent router-view
|
<template>
<div class="load">
Load
<button v-on:click="onClick">Show Toast from Load component</button>
</div>
</template>
<script>
export default {
name: "Load",
methods: {
onClick: function() {
this.$emit("loadClicked", "");
}
}
};
</script>
|
We have prepared sample for your reference, check this below link
If you still facing issue, kindly modify the shared sample with your exact requirement and share to us. Based on this we can provide the solution at earliest.
Regards,
Pandiyaraj M
