<!--模板部分-->
<template>
 <div class="container">
  <h1>我是父亲</h1>
  <input type="text" v-model="myMsg">
<!--<input type="text" v-model="myNum">-->
  <ul v-for="item of myObj">
   <li>{{item.name}}</li>
  </ul>
 <br>
<!--绑定父组件的某个变量myMsg-->
  <div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
   <child :send-message="myMsg" :send-num="myNum" :send-obj="myObj"></child>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
 name:'helloworld',
 data(){
//初始化obj
  var obj = {
   myMsg:'hello,my son!',
   myNum:123,
   myObj:[]
  };
//延时返回myObj，模拟ajax的延时情况
  setTimeout(function(){
   obj['myObj'] = [{id:1,name:'jack'},{id:2,name:'tom'}];

  },2000);
  return obj;
 },
 components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
 background: #ccc;
 color:green;
}
</style>

<!--模板部分-->
<template>
 <div class="sub-container">
  <h3>我是儿子</h3>

  <div>我从父亲那边接收过来的信息：</div>
  <div>字符串：{{sendMessage}}</div>
  <div>数字：{{sendNum}}</div>
  <div>
   <ul v-for="item of list">
     <li>{{item.name}}</li>
   </ul>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//子组件
export default {
 name:'child',//必须设定name，否则无法在父组件import
 props:{
  sendMessage:{
   type:String,//传入类型必须是字符串
   required:true//必传
  },
  sendNum:{
   type:Number,//传入类型必须是数字
   required:true
  },
//如果是数组或对象
  sendObj:{
   validator:function(val){

    if(Object.prototype.toString.call(val) === '[object Array]' || Object.prototype.toString.call(val) === '[object Object]'){
     return true;
    }
   }
  }
 },//声明验证类型
 data(){

   return {
    list:null
   };
 },
 watch:{//监控父组件sendObj的变化
  sendObj(newval,oldval){

   if(newval !== oldval){

    var newobj =JSON.parse(JSON.stringify(newval));//复制一份，避免污染父组件的数据
    newobj.push({id:3,name:'mike'});//追加一个对象
    this.list = newobj;//将新值赋予data的list
   }

  }
 }
}
</script>
<!--样式部分-->
<style>
.sub-container{
 background: blue;
 color:red;
}
</style>