将数据传递给vue.js中的组件

我正在努力了解如何在vue.js中的组件之间传递数据。 我已经多次阅读文档，看了很多与vue相关的问题和教程，但是我仍然没有得到它。

为了包围我的头，我希望帮助完成一个非常简单的例子

1. 显示一个组件中的用户列表（完成）
2. 当点击链接（完成）时，将用户数据发送到新组件 – 请参阅底部的更新。
3. 编辑用户数据并将其发送回原始组件（还没有到此为止）

这是一个小提琴，第二步失败： https : //jsfiddle.net/retrogradeMT/d1a8hps0/

我明白，我需要使用道具来传递数据到新的组件，但我不知道如何在function上做到这一点。 如何将数据绑定到新组件？

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

好的，我已经find了第二步。 这是一个新的小提琴展示进展： https : //jsfiddle.net/retrogradeMT/9pffnmjp/

因为我正在使用Vue路由器，所以我不使用道具将数据发送到新组件。 相反，我需要在v-link上设置参数，然后使用转换钩来接受它。

V-link更改请参阅vue-router文档中的命名路由 ：

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

然后在组件上，将数据添加到path选项中， 参见转换钩子 ：

 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, } }, }) 

Answer 1

————-以下仅适用于Vue 1 ————–

传递数据可以通过多种方式完成。 该方法取决于使用的types。

---

如果您想在添加新组件时从您的html传递数据。 这是使用道具完成的。

 <my-component prop-name="value"></my-component> 

只有在您的props属性中添加了道具名称prop-name ，这个道具值才可用于您的组件。

---

当数据由于某些dynamic或静态事件而从组件传递到另一个组件时。 这是通过使用事件调度员和广播员完成的。 所以举个例子，如果你有这样的组件结构：

 <my-parent> <my-child-A></my-child-A> <my-child-B></my-child-B> </my-parent> 

而你想从<my-child-A>发送数据到<my-child-B>然后在<my-child-A>中发送一个事件：

 this.$dispatch('event_name', data); 

这个事件将会一直延伸到母链。 而且从任何一个家长你有一个分支向<my-child-B>事件和数据。 所以在父母：

 events:{ 'event_name' : function(data){ this.$broadcast('event_name', data); }, 

现在这个广播将沿着儿童链走下去。 无论您想要抓住哪一个孩子，在我们的例子<my-child-B>我们都会添加一个事件：

 events: { 'event_name' : function(data){ // Your code. }, }, 

---

传递数据的第三种方法是通过v链接中的参数。 当组件链被完全销毁或者当URI改变时，这个方法被使用。 我可以看到你已经了解他们。

---

决定你想要什么types的数据通信，并适当地select。

Answer 2

我认为这个问题在这里：

 <template id="newtemp" :name ="{{user.name}}"> 

当你在prop前加上:你正在向Vue表明它是一个variables，而不是一个string。 所以你不需要user.name周围的{{}} 。 尝试：

 <template id="newtemp" :name ="user.name"> 

编辑 – – –

以上是真实的，但更大的问题在于，当您更改URL并转到新路线时，原始组件将消失。 为了让第二个组件编辑父数据，第二个组件需要是第一个组件的子组件，或者只是同一个组件的一部分。

Answer 3

我已经find了一种方法来将父数据传递给Vue中的组件作用域，我认为这有点破解，但也许这会帮助你。

1）Vue Instance中的引用数据作为外部对象（data：dataObj）

2）然后在子组件的数据返回函数中只返回parentScope = dataObj和瞧。 现在你不能做像{{parentScope.prop}}这样的事情，并且会像魅力一样工作。

祝你好运！