Vue.js 使用Vue路由器时,如何在VueJS组件之间传递数据?
我设置了以下路线:Vue.js 使用Vue路由器时,如何在VueJS组件之间传递数据?,vue.js,vuejs2,vue-component,vue-router,Vue.js,Vuejs2,Vue Component,Vue Router,我设置了以下路线: Vue.use(Router) export default new Router({ routes: [ { path: '/group/:id', name: 'Group', component: GroupContainer, children: [ { // when /group/:id/posts is matched path: 'posts',
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
}
]
}
]
})
因此,组组件有一个带有router视图的模板
<template>
<div class="group">
I am a group page
<router-view></router-view>
</div>
</template>
我是一个小组网页
因此,组组件最终成为ViewPost、ViewTopics或ViewPeople的父组件,但它并不直接包含这些组件
将数据从父级(组)传递到子级(ViewPosts…)并允许子级向父级发射数据的好系统是什么?一种方法是将属性和处理程序添加到路由器视图中
<div class="group">
I am a group page
<router-view :topics="topics"
:people="people"
:posts="posts"
@topic-emitted="onTopicEmitted">
</router-view>
</div>
我是一个小组网页
这里有一个简短的例子。@ben You;欢迎你:)我通常不会这样做,但这是你的第一个问题;如果答案帮助了你/回答了你的问题,你通常应该投赞成票或接受答案,或两者兼而有之。不过完全取决于你。