vue.js의 구성 요소간에 데이터를 전달하는 방법을 이해하는 데 어려움을 겪고 있습니다. 문서를 여러 번 읽었고 많은 vue 관련 질문과 자습서를 보았지만 여전히 이해하지 못하고 있습니다.
이것에 대해 머리를 감싸기 위해 꽤 간단한 예제를 완성하는 데 도움이되기를 바랍니다.
- 하나의 구성 요소에 사용자 목록 표시 (완료)
- 링크를 클릭 (완료)하면 사용자 데이터를 새 구성 요소로 보냅니다. 하단의 업데이트를 참조하십시오.
- 사용자 데이터를 편집하고 원래 구성 요소로 다시 보냅니다 (지금까지 확인하지 않음).
다음은 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,
}
},
})