How do you pass data between VueJS components when using a Vue router?
I have this routes setup:
Vue.use(Router)
export default new Router({
routes: [
{
path: '/group/:id',
name: 'Group',
component: GroupContainer,
children: [
{
// when /group/:id/posts is matched
path: 'posts',
component: ViewPosts
},
{
// when /group/:id/topics is matched
path: 'topics',
component: ViewTopics
},
{
// when /group/:id/people is matched
path: 'people',
component: ViewPeople
}
]
}
]
})
So the group component has a template with a router view here
<template>
<div class="group">
I am a group page
<router-view></router-view>
</div>
</template>
Thus, the group bean becomes the parent of ViewPosts, ViewTopics, or ViewPeople, but it does not directly contain the components.
What is a good system for passing data from parent (Group) to children (ViewPosts ...) and allow children to emit parent?
+3
source to share