父子组件通讯

一、父传子

1、父页面：

<userPage :num='4'></userPage>

2、子页面（props 接收）

（对象方式接收）

export default{
 props：{
  num{
   type: Number, //传参的类型
   required: true, //是否必传
   default: 1 //如果未定义，默认值就是1
  }
 }
}

（数组方式接收）

export default{
 props['num']
}

二、子传父

1、子页面（this.$emit 传递）

<button @click="chuanZhi"></button>

export default {
   data(){
       return {
           num:1       
       }          
   },
   methods:{
       chuanZhi(){
        //aa是自定义事件名，this.num传参
           this.$emit('aa',this.num)       
       }   
   } 
}

2、父页面（@aa方法接收）

<userPage @aa='fn(2)'></userPage>

fn(a){
console.log(a)		//1
}

三、在子组件跟新父组件数据（.sync）

1、父组件 /useer【id，id】

 <user-selection  :userIds.sync="useer"></user-selection>

2、子组件

handle(){
 this.$emit("update:userIds",[1,2,3])
}