39
我很努力地理解如何在vue.js中的組件之間傳遞數據。我已經多次閱讀文檔並查看了許多與vue相關的問題和教程，但我仍然沒有得到它。將數據傳遞給vue.js中的組件
要總結我解決這個頭，我希望幫助完成一個非常簡單的例子
- 顯示用戶的列表中一個組件（完成）
- 用戶數據發送到一個新的組件時，點擊鏈接（完成） - 請參閱底部的更新。
- 編輯用戶數據，併發送回原來的組件（還沒有得到這一步）
這裏是一個小提琴，從而未能在步驟二：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>
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,
}
},
})
UPDATE
好的，我已經弄清楚了第二步。這裏是一個新的小提琴展示進展：https://jsfiddle.net/retrogradeMT/9pffnmjp/
因爲我使用Vue路由器，我不使用道具發送數據到一個新的組件。相反，我需要在v-link上設置參數，然後使用轉換鉤來接受它。
V-LINK改變see named routes in vue-router docs：
<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>
然後在組件上，將數據添加到路由選項see transition hooks：
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,
}
},
})
謝謝，這真的很有幫助。唯一我仍在努力的是命名約定。即：我有通過v鏈接作爲名稱傳遞的user.name。我現在可以編輯名稱變量並將其作爲名稱傳回原始組件，但原始組件沒有名爲var的變量。我在這裏錯過了什麼？不可能通過v-link傳遞一個對象？ – retrograde
您已經傳遞了一個對象。 「params」是一個對象。名稱密鑰可以分配給組件中的this.user.name。如果你需要幫助，創建一個小提琴，並讓我知道。檢查了這一點：http://vuejs.github.io/vue-router/en/route.html – notANerdDev
啊，好吧，我已經得到它。再次感謝。我感謝你的幫助，它讓事情變得更加清晰。 – retrograde