Vue 라우터를 사용할 때 VueJS 구성 요소 간에 데이터를 전달하는 방법

Vue 라우터를 사용할 때 VueJS 구성 요소 간에 데이터를 전달하는 방법

경로 설정:

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의 상위 구성 요소가 되지만 구성 요소를 직접 포함하지는 않는다.

부모(그룹)의 데이터를 자녀(뷰포스트...)에게 전달하고 자녀들이 부모에게까지 배출할 수 있도록 해주는 좋은 시스템은 무엇인가?

이렇게 하는 한 가지 방법은 속성과 처리기를 에 추가하는 것이다.router-view.

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

여기 간단한 예가 있다.

참조URL: https://stackoverflow.com/questions/43191329/how-do-you-pass-data-between-vuejs-components-when-using-the-vue-router