组件之间传值(父子通信）

父组件向子组件传值

1. 在父组件中，data自定义一个变量，然后在引用的子组件中绑定

data(){
    return{
    msg:"我是父组件的值"
  }
}

2. HTML 页面代码部分

<sonDiv :fatherMsg="msg"></sonDiv>

3. 然后就是在子组件中接收啦，定义props接收，注意与HTML部分名称一致

export default{
    data(){
        return{
    //
    }
    },
  props:['fatherMsg'] //即可直接使用fatherMsg字段
}

子组件向父组件传值

1. 子组件中，对于需要进行传值的操作写上

this.$emit("自定义状态名",值); //这暂时写一个状态名为getSonMsg

2. 在父组件中，对于绑定的子组件，添加@状态接收

<sonDiv :fatherMsg="msg" @getSonMsg="getSonMsg"></sonDiv>

3. 然后再方法中定义getSonMsg

getSonMsg(val){
    console.log(val)
}