父子组件通信

父传子数据

父组件中：
<son :num="num" :name="name"/>

data() {
    return {
      num:123,
      name:"father",
    };
},
-----------------
子组件中：
<template>
<div>{{name}},{{num}}</div>
</template>

props:['name','num'],   
//或者对象传递
props:{
    name:{
        type: String,
    },
    num:{
        type: Number,
        default: 0  //默认值为0
    }
    arr:{
        type: Array,
        defualt: () => []
    }
}

子传父:

子组件中：
<template>
    //son ==>子组件随意方法
    <div @click='son'>调用父组件</div>
</template>

methods: {
        son(){
            //调用父组件中的方法，与参数
            this.$emit("father", 2);
},
----------------
父组件:
//前面的father对应的是子组件的调用父组件的方法，后面名字随便起（是父组件中的方法）
<son  @father="father"/>
methods: {
        father(num){
            console.log(num) ===>2
},