Vue2-父子组件通信

子组件

<template>
  <div>
    <el-form>
      <el-form-item label="码值">
        <el-input v-model="code" @input="sendFather"></el-input>
      </el-form-item>
      <el-form-item label="显示名称">
        <el-input v-model="name" @input="sendFather"></el-input>
      </el-form-item>
    </el-form>
  </div>
<script>
export default {
  name:"Child",
  props:{
    initSecondData:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return{
      code:"",
      name:""
    }
  },
  watch:{
    initSecondData(newVal){
      console.log("第二个组件获取数据 => ",newVal);
      this.code = newVal.code + 100;
      this.name = newVal.name + "第二组件";
    }
  },
  methods:{
    sendFather(){
      console.log("child getData =>",this.getData());
      this.$emit('inputChange',this.getData())
    },
    getData(){
      return{
        code:this.code,
        name:this.name
      }
    }
  }
}
</script>
</template>

父组件

<template>
  <div>
    <p>father</p>
    <TestChild  @inputChange="getFirstData"></TestChild>
    <el-form label-width="80px" :model="fatherModel">
      <el-form-item label="名称">
        <el-input v-model="fatherModel.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="fatherModel.sex"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-input v-model="fatherModel.type"></el-input>
      </el-form-item>
      <TestChild :initSecondData="initSecondData"></TestChild>
  </el-form>
  <el-button @click="submitForm">提交</el-button>
  </div>
</template>

<script>
import TestChild from "./TestChild.vue";
export default {
  name:"Father",
  components:{
    TestChild
  },
  data(){
    return{
      fatherModel:{
        name:"",
        sex:"",
        type:"",
        proCode:"",
        proName:"",
        prcCode:"",
        prcName:""
      },
      initSecondData:{

      }
    }
  },
  methods:{
    submitForm(){
      console.log("提交内容 => ",this.fatherModel);
    },
    getFirstData(data){
      let newData = {...data};
      this.initSecondData = newData;
      console.log("newData =>",newData);
      console.log("传值为data =>", data);
      this.fatherModel.proCode = data.code;
      this.fatherModel.proName = data.name;
    }  
  }
}
</script>