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