使用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。