vue父子组件传值是很常见的，多数情况下都是父传递给子的值是基础数据类型，如string,number,boolean，

 

　　当父组件值被修改时，子组件能够实时的作出改变。

 

　　如果父子传值的类型是复杂数据类型（object,array）这种时，

 

　　1.通常的做法是在子组件监听props属性

 

　　<!--父组件-->

 

　　<divclass="parent">

 

　　<!--子组件-->

 

　　<child:val="val"></child>

 

　　</div>

 

　　<script>

 

　　exportdefault{

 

　　data(){

 

　　return{

 

　　val:{

 

　　name:'name',

 

　　age:'18'

 

　　}

 

　　}

 

　　}

 

　　}

 

　　</script>

 

　　<!子组件监听props>

 

　　<divclass="child">

 

　　{{val.name+":"+val.age}}

 

　　</div>

 

　　<script>

 

　　exportdefault{

 

　　props:'val',

 

　　data(){return{}},

 

　　watch:{

 

　　val:{

 

　　handle(newVal){

 

　　console.log(newVal)

 

　　},

 

　　deep:true

 

　　}

 

　　}

 

　　}

 

　　</script>

 

　　细节点：这里监听到父组件的值被修改时，不要在回调里再对此值做修改操作，否则提示报错，并进入死循环导致浏览器gg