子组件
<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>
