使用 Vue 路由器时如何在 VueJS 组件之间传递数据？

Question

我设置了这些路由：

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
        }
      ]
    }
  ]
})

所以组组件在这里有一个带有路由器视图的模板

<template>
  <div class="group">
    I am a group page
    <router-view></router-view>
  </div>
</template>

因此组组件最终成为 ViewPosts、ViewTopics 或 ViewPeople 的父级，但是，它并不直接包含这些组件。

什么是将数据从父级（Group）传递给子级（ViewPosts...）并允许子级发送给父级的好系统？

Answer 1

一种方法是将属性和处理程序添加到 router-view。

<div class="group">
  I am a group page
  <router-view :topics="topics"
           :people="people"
           :posts="posts"
           @topic-emitted="onTopicEmitted">
  </router-view>
</div>

这是一个快速 example。