Prop静态传递数据
<!--Prop静态传递数据-->
<div class="app">
<my-object message="父组件数据" name="父组件名称" age="父组件年龄"></my-object>
</div>
//Prop静态传递数据(子组件)
Vue.component('my-object',{
template:"<span>我是子组件的DOM:{{aget2}}---{{message2}}---{{name2}}---{{nametextFun}}</span>",
props:['message','name','age'],
data:function(){
return {//把父组件数据赋值给子组件通过prop传递
aget2:this.age,
message2:this.message,
name2:this.name
}
},
computed:{//子组件计算属性
nametextFun:function(){
return this.name
}
},
});
//porp静态传递
var vm=new Vue({el:'.app'});
Prop动态传递数据
<!--Prop动态传递数据--->
<div class="app2">
<ul>
<my-object2 v-for="item in list" :liitem="item"></my-object2>
</ul>
</div>
//Prop动态传递数据(子组件)
Vue.component('my-object2',{
props:["liitem"],
template:'<li>【{{liitem.id}}】{{liitem.name}}----{{liitem.age}}----{{liitem.gender}}</li>';
});
var vm2=new Vue({
el:'.app2',
data:{
list:[
{id:1,name:'李特成',gender:'男',age:25},
{id:2,name:'凡冰',gender:'女',age:20}
]
}
});