vue 父组件与子组件传值

（一）父组件向子组件传值

1.父组件的data中定义值

data() {
    return {
        userInfo:null
    }
}

2.引入并调用子组件

import Personal from "@/views/home/personalDialog"
components:{
    Personal,
}

3.在引用的子组件的标签上通过v-bind指令给子组件传值

<Personal ref="personal" @changeUserDate="changeUserDate" @closeChildDiglog="closeChildDiglog" :userData="userInfo"></personal>

4.子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里 Prop 的大小写

props:["userData"],

注意：

子组件接受的父组件的值分为：引用类型和普通类型两种， 
普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null） 
引用类型：数组（Array）、对象（Object） 
其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值， 
但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。

（二）子组件向父组件传值

1.子组件中需要以某种方式，例如点击事件的方法来触发一个自定义事件（closeDialog）

<el-button @click="closeDialog" size="medium">取消</el-button>

2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

closeDialog(event,flag) {
  //触发父组件关闭方法
  if(flag){
    this.$emit("changeUserDate",this.personalForm);
    this.$emit("closeChildDiglog");
  }else{
    this.cleanDate();
    this.$emit("closeChildDiglog");
  }
}

3.父组件中，在子组件‘标签’上绑定对自定义事件的监听（changeUserDate、closeChildDiglog）

<Personal ref="personal" @changeUserDate="changeUserDate" @closeChildDiglog="closeChildDiglog" :userData="userInfo"></personal>

自定义事件（无参数传递）：

//关闭个人信息弹窗
closeChildDiglog(){
   this.personalFormVisible = false;
},

自定义事件（有参数传递）：

//更改用户的值
changeUserDate(data){
    this.sysUserName = data.user_name;
    Object.assign(this.userInfo,data);
},

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了