如何在Vue2中将数据从父级传递给子级
Posted
技术标签:
【中文标题】如何在Vue2中将数据从父级传递给子级【英文标题】：How to pass data from parent to child in Vue2 【发布时间】：2017-11-07 11:25:33 【问题描述】：所以我有以下 4 个组件
卡片列表组件
Vue.component('card-list',
template:`<div >
<card v-for="task in tasks" >task.month</card>
</div>`,
data()
return
tasks:[
description:'Get up from Bed',completed:true,month:12,
description:'Brush your teeth',completed:false,month:24,
description:'GO to POOP ',completed:false,month:36,
description:'Eat BreakFast',completed:true,month:12,
]
);
卡片组件
Vue.component('card',
template:`
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 bx_main">
<div class="flip3D col-md-12 pad">
<back><slot></slot></back>
<front><slot></slot></front>
</div>
</div>`,
);
前端组件
Vue.component('front',
props: ['months'],
template:`
<div class="front"><span class="fav_main2"><span><i class="">months</i></span></span>
<div class="col-md-12 star_mn">
<div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
<div class="clearfix"></div>
</div>
</div>`,
);
后退组件
Vue.component('back',
props: ['months','rates'],
template:`
<div class="back">
<span class="fav_main2"><span><i class="">months</i></span></span>
<div class="col-md-12 star_mn">
<div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
<div class="clearfix"></div>
</div>
<div class="back_main_cont">
<div class="col-md-12 back_tbl_main">
<div class="back_tbl">
Table goes here
</div>
</div>
<div class="col-md-12">
<div class="col-md-9 col-sm-9 col-xs-9 pad">
<div class="input-group bootstrap-touchspin">
<input class="commission form-control"
type="text" data-cardpos="0" value="0" style="display: block;"></div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 pad">
<button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button"><i class="fa fa-eye"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
`,
);
我想将task.month 值传递给子组件
我该怎么做？
更新1
试过了
Vue.component('card-list',
template:`<div >
<card v-for="task in tasks" :months="task.months" ></card>
</div>`,
data()
return
tasks:[
description:'Get up from Bed',completed:true,month:12,
description:'Brush your teeth',completed:false,month:24,
description:'GO to POOP ',completed:false,month:36,
description:'Eat BreakFast',completed:true,month:12,
]
);
错误
[Vue 警告]：编译模板出错：
无效表达式：:months="task.months"发现于
--->
【问题讨论】：
您的意思是要将其从card-list 传递给card？
@RoyJ umm 数据必须显示在 front componenet 和 back 组件实际上是 card componenet 的一部分
@RoyJ 我试着写成这样<card v-for="task in tasks" months="task.months"></card> 但有一个错误
试试:months="task.months"
@RoyJ no 不起作用，我做错了吗？ , Vue 是否允许向 grandChildren 传递数据？
【参考方案1】：
需要在card中声明prop，然后在html标签中传递prop。
Vue.component('card-list',
template: `<div >
<card v-for="task in tasks" :key="task" :months="task.month">task.month</card>
</div>`,
data()
return
tasks: [
description: 'Get up from Bed',
completed: true,
month: 12
,
description: 'Brush your teeth',
completed: false,
month: 24
,
description: 'GO to POOP ',
completed: false,
month: 36
,
description: 'Eat BreakFast',
completed: true,
month: 12
,
]
);
Vue.component('card',
template: `
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 bx_main">
<div class="flip3D col-md-12 pad">
<back :months="months"><slot></slot></back>
<front :months="months"><slot></slot></front>
</div>
</div>`,
props: ['months']
);
Vue.component('front',
props: ['months'],
template: `
<div class="front"><span class="fav_main2"><span><i class="">months</i></span></span>
<div class="col-md-12 star_mn">
<div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
<div class="clearfix"></div>
</div>
</div>`,
);
Vue.component('back',
props: ['months', 'rates'],
template: `
<div class="back">
<span class="fav_main2"><span><i class="">months</i></span></span>
<div class="col-md-12 star_mn">
<div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
<div class="clearfix"></div>
</div>
<div class="back_main_cont">
<div class="col-md-12 back_tbl_main">
<div class="back_tbl">
Table goes here
</div>
</div>
<div class="col-md-12">
<div class="col-md-9 col-sm-9 col-xs-9 pad">
<div class="input-group bootstrap-touchspin">
<input class="commission form-control"
type="text" data-cardpos="0" value="0" style="display: block;"></div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 pad">
<button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button"><i class="fa fa-eye"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
`,
);
new Vue(
el: '#app'
);<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<card-list id="app">
</card-list>【讨论】：
以上是关于如何在Vue2中将数据从父级传递给子级的主要内容，如果未能解决你的问题，请参考以下文章
在 React-Router 中将状态作为道具从父级传递给子级？