Vueルーターを使用する場合、VueJSコンポーネント間でデータをどのように渡しますか？

Question

私はこれらのルートを設定している：ViewTopics、

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

だから、グループの構成要素は、だから、グループの構成要素はViewPostsに親でここ

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

ルータビューのテンプレートを終了した場合、またはViewPeopleですが、コンポーネントは直接含まれていません。

親（Group）から子（ViewPosts ...）にデータを渡し、子が親に放出できるようにするには、どのようなシステムが適していますか？

Answer 1

これを行う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です。