所以我有如下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 warn]: Error compiling template:
- invalid expression: :months="{{task.months}}"
found in
--->
最佳答案
需要在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>关于vue.js - Vue2中如何将数据从父级传递给子级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44390103/