Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello I am using vue router and I put everything in one container. The container would have the data/updated data and sharing that with the children pages however I don't know how I should do that. I have already headache in these 2 weeks but not much luck so far.
My router looks like this:
const routes = [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: TheContainer,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: 'information',
redirect: '/information/test2info',
name: 'Information',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'test2nfo',
name: 'Test Information',
component: Test2Info
},
{
path: 'testinfo',
name: 'Test Information',
component: Test3
}
]
},
]
}
]
How I can share the data with children and if I update the data then it will be show in the children too? Thanks in advance the answers.
If you've child component, then try to use props and passing updated data in it,
and instead of passing it in routes, just pass parent component in route and use child component in parent container.
or provide a little bit more about your approach that what exactly you want to do with whole process
@Tjyoung I am using routes in vue like this
<router-view :key="$route.path"></router-view>
I tried to pass with $emit and get with $on event but no success. Now I am trying with vuex if that helps. How I should use props when I can't in the router-view? Sorry for many questions, my knowledge in vue is limited.
@BeginnerSoul do you want to use only router path? or anything else?
What exactly are you trying to use in child component?
Just want to get idea what you want so I can you better solution for that.
@Tjyoung Well what I am doing is to get the user information from custom API and saving temporarily in the container and the container would share the data with children. The user information may be updated and then on the vue could be seen the update realtime.
use mitt
// npm i mitt
//In your app.js or main.js file
import mitt from "mitt";
import App from './App.vue'
const app = createApp(App);
const emitter = mitt();
app.config.globalProperties.emitter = emitter;
app.mount('#app')
In your parent or any component where you want to trigger update, use emitter
// here I am giving you example of custom update method but you can use custom emitter wherever you like,
methods: {
update(data) {
this.emitter.emit('custom-event', data);
}
}
your child component should act, as follows
data(){
return:{
msg: null // here you can use your own variable which you want display
}
},
created() {
this.emitter.on('custom-event', (evt) => {
this.msg = evt;
})
},
this example will give you a basic idea of sharing data globally in your application, but if you're using any kind of authentication then you still need some sort of statement management to keep your data stored in browser
Alright, I did with Vuex in the end. Thank you for the answers. I will try your method in the future if I will find an usage of that. Thank you once again.
Please or to participate in this conversation.