将数据传递给 vue.js 中的组件 [英] Passing data to components in vue.js
问题描述
我正在努力理解如何在 vue.js 中的组件之间传递数据.我已经多次阅读文档并查看了许多与 vue 相关的问题和教程，但我仍然没有明白.
为了解决这个问题，我希望得到帮助来完成一个非常简单的例子
- 在一个组件中显示用户列表(完成)
- 在点击链接(完成)时将用户数据发送到新组件 - 请参阅底部的更新.
- 编辑用户数据并将其发送回原始组件(到目前为止还没有)
这是一个在第二步失败的小提琴:https://jsfiddle.net/retrogradeMT/d1a8hps0/
我知道我需要使用 props 将数据传递给新组件，但我不确定如何在功能上做到这一点.如何将数据绑定到新组件?
HTML:
<路由器视图></路由器视图><模板 id="userBlock" ><ul><li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }">显示新组件<template id="newtemp" :name ="{{user.name}}"><表格><label>名称:</label><input v-model="name"><input type="submit" value="提交"></表单>
主要组件的js:
Vue.component('app-page', {模板:'#userBlock'，数据:函数(){返回{用户:[]}},准备好:函数(){this.fetchUsers();},方法: {fetchUsers: 函数(){变量用户 = [{编号:1，名称:'汤姆'},{编号:2，名称:'布莱恩'},{编号:3，姓名:'山姆'},];this.$set('users', users);}}})第二个组件的JS:
Vue.component('newtemp', {模板:'#newtemp'，道具:'名字'，数据:函数(){返回 {姓名:姓名，}},})更新
好的，我已经弄清楚了第二步.这是一个显示进度的新小提琴:https://jsfiddle.net/retrogradeMT/9pffnmjp/
因为我使用的是 Vue-router，所以我不使用 props 将数据发送到新组件.相反，我需要在 v-link 上设置参数，然后使用转换钩子来接受它.
V-link 更改 查看 vue-router 文档中的命名路由:
显示新组件然后在组件上，将数据添加到路由选项查看转换钩子:
Vue.component('newtemp', {模板:'#newtemp'，路线: {数据:函数(转换){过渡.下一个({//保存url中传入的id名称:transition.to.params.name});}},数据:函数(){返回 {姓名:姓名，}},})-------------以下仅适用于 Vue 1 --------------
可以通过多种方式传递数据.方法取决于使用类型.
<小时>如果您想在添加新组件时从 html 传递数据.这是使用道具完成的.
仅当您将道具名称 prop-name 添加到您的 props 属性时，此道具值才可用于您的组件.
当数据由于某些动态或静态事件而从一个组件传递到另一个组件时.这是通过使用事件调度器和广播器来完成的.例如，如果您有这样的组件结构:
<my-child-A></my-child-A><my-child-B></my-child-B></我的父母> 并且您想将数据从
this.$dispatch('event_name', data);此事件将一直沿父链向上传播.并且从你有一个分支到 <my-child-B> 的父母那里你可以将事件与数据一起广播.所以在父级中:
事件:{'event_name':函数(数据){this.$broadcast('event_name', data);},现在这个广播将沿着子链传播.并且在您想要获取事件的任何孩子处，在我们的例子中 <my-child-B> 我们将添加另一个事件:
事件:{'event_name':函数(数据){//你的代码.},},<小时>
第三种传递数据的方式是通过 v-links 中的参数.当组件链完全销毁或 URI 更改时使用此方法.我可以看出你已经理解它们了.
<小时>Decide what type of data communication you want, and choose appropriately.
I'm struggling to understand how to pass data between components in vue.js. I have read through the docs several times and looked at many vue related questions and tutorials, but I'm still not getting it.
To wrap my head around this, I am hoping for help completing a pretty simple example
- display a list of users in one component (done)
- send the user data to a new component when a link is clicked (done) - see update at bottom.
- edit user data and send it back to original component (haven't gotten this far)
Here is a fiddle, which fails on step two: https://jsfiddle.net/retrogradeMT/d1a8hps0/
I understand that I need to use props to pass data to the new component, but I'm not sure how to functionally do it. How do I bind the data to the new component?
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 for main component:
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 for second component:
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
UPDATE
Ok, I've got the second step figured out. Here is a new fiddle showing the progress: https://jsfiddle.net/retrogradeMT/9pffnmjp/
Because I'm using Vue-router, I don't use props to send the data to a new component. Instead, I need set params on the v-link and then use a transition hook to accept it.
V-link changes see named routes in vue-router docs:
<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>
Then on the component, add data to the route options 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,
}
},
})
-------------Following is applicable only to Vue 1 --------------
Passing data can be done in multiple ways. The method depends on the type of use.
If you want to pass data from your html while you add a new component. That is done using props.
<my-component prop-name="value"></my-component>
This prop value will be available to your component only if you add the prop name prop-name to your props attribute.
When data is passed from a component to another component because of some dynamic or static event. That is done by using event dispatchers and broadcasters. So for example if you have a component structure like this:
<my-parent>
<my-child-A></my-child-A>
<my-child-B></my-child-B>
</my-parent>
And you want to send data from <my-child-A> to <my-child-B> then in <my-child-A> you will have to dispatch an event:
this.$dispatch('event_name', data);
This event will travel all the way up the parent chain. And from whichever parent you have a branch toward <my-child-B> you broadcast the event along with the data. So in the parent:
events:{
'event_name' : function(data){
this.$broadcast('event_name', data);
},
Now this broadcast will travel down the child chain. And at whichever child you want to grab the event, in our case <my-child-B> we will add another event:
events: {
'event_name' : function(data){
// Your code.
},
},
The third way to pass data is through parameters in v-links. This method is used when components chains are completely destroyed or in cases when the URI changes. And i can see you already understand them.
Decide what type of data communication you want, and choose appropriately.
这篇关于将数据传递给 vue.js 中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
