vue.js의 구성 요소간에 데이터를 전달하는 방법을 이해하는 데 어려움을 겪고 있습니다. 문서를 여러 번 읽었고 많은 vue 관련 질문과 자습서를 보았지만 여전히 이해하지 못하고 있습니다.

이것에 대해 머리를 감싸기 위해 꽤 간단한 예제를 완성하는 데 도움이되기를 바랍니다.

1. 하나의 구성 요소에 사용자 목록 표시 (완료)
2. 링크를 클릭 (완료)하면 사용자 데이터를 새 구성 요소로 보냅니다. 하단의 업데이트를 참조하십시오.
3. 사용자 데이터를 편집하고 원래 구성 요소로 다시 보냅니다 (지금까지 확인하지 않음).

다음은 2 단계에서 실패한 바이올린입니다. https://jsfiddle.net/retrogradeMT/d1a8hps0/

새 구성 요소에 데이터를 전달하기 위해 소품을 사용해야한다는 것을 이해하지만 기능적으로 수행하는 방법을 모르겠습니다. 데이터를 새 구성 요소에 어떻게 바인딩합니까?

HTML :

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

주요 구성 요소에 대한 Node.js :

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

두 번째 구성 요소에 대한 JS :

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

최신 정보

좋아, 두 번째 단계를 알아 냈다. 다음은 진행 상황을 보여주는 새로운 바이올린입니다 : https://jsfiddle.net/retrogradeMT/9pffnmjp/

Vue-router를 사용하고 있기 때문에 데이터를 새 구성 요소로 보내는 데 소품을 사용하지 않습니다. 대신 v-link에 매개 변수를 설정 한 다음 전환 후크를 사용하여 수락해야합니다.

V-link 변경 사항 은 vue-router 문서에서 명명 된 경로를 참조하십시오 .

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

그런 다음 구성 요소에서 경로 옵션에 데이터를 추가하고 전환 후크를 참조하십시오 .

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})