将数据传递给 vue.js 中的组件
我很难理解如何在 vue.js 中的组件之间传递数据。我已经通读了好几遍这些文档，看了很多与价值相关的问题和教程，但是我还是不明白。
为了理解这一点，我希望能够帮助完成一个非常简单的示例
- 在一个组件中显示用户列表(完成)
- 当点击一个链接时，将用户数据发送到一个新的组件-参见底部的更新。
- 编辑用户数据并将其发送回原始组件(还没有到这一步)
下面是一个小提琴，它在步骤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>
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);
}
}
})
第二个组成部分:
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
更新
好了，我已经想出了第二步。这里有一个新的小提琴显示的进度: https://jsfiddle.net/retrogradeMT/9pffnmjp/
因为我使用 Vue-router，所以我不使用道具将数据发送到新组件。相反，我需要在 v-link 上设置 params，然后使用一个转换钩子来接受它。
V 型链接变化 查看 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,
}
},
})
最佳答案