问题
在vue中如何将父组件中的 对象数组 传入到子组件中
子组件
<template>
<ul>
<li v-for="(item,index) in quote" :key="index">
<span>{
{
item.subhead}}</span>
<span>{
{
item.message}}</span>
</li>
</ul>
</template>
<script>
export default({
//props的3中写法:
1.数组类型
props:['quote','subhead','message']
2.类型限制
props:{
quote:Array;
subhead:String;
message:String;
}
3.提供默认值
props:{
quote:{
type:Array,
default(){
return[]}
},
subhenad:{
type:String,
default:'订单号'
},
message:{
type:String,
}
}
})
</script>
父组件
<template>
<cpn :quote="quote" :subhead="subhead" :message="message"></cpn>
</template>
<script>
import cpn from "./cpn.vue"
export default({
data(){
return{
quote:[
{
subhead:'订单编号:',
message:'n20200910'
},{
subhead:'获取时间:',
message:'2020-09-10'
},{
subhead:'证件号:',
message:'00987'
}],
}
},
components:{
cpn,
}
})
</script>
成果展示
订单编号:n20200910 |
获取时间:2020-09-10 |
证件号:00987 |