使用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，但它并不直接包含组件。

什么是一个很好的制度，从父（集团）数据传递给孩子们（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。