vue 通过prop向子组件通讯

 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}
    ]
  }
});