第一种方式：通过prop和事件
父传子：通过props穿参数
子传父：通过$emit
这种方式是经常使用最多的一种
第二种方式：通过$refs访问子组件实例
给子组件定义ref对象，通过 $refs传递参数
这里有一种场景：子组件中没有事件可以作为触发点，将子组件中的数据传递给父组件。此时可以使用第二种方式来解决这样类似的问题。
举例说明：
这里简单的画了一个大概布局图
要求1-1: 子组件中的数据传递给父组件，然后点击“确认”按钮，通过ajax把数据发送到后端，后端进行数据保存
1-2: 查看该页面时，要求信息回显
this.$refs.childrenRef.childrenFun(),
this.$parent.parentFun()
父组件：
//父组件：<templete><div class="parent-box"><el-button type="parimy" @click="handleSubmit">确认</el-button><resolution-result ref="resoluttionResult"></resolution-result></div></templete>created(){this.init()},methods:{// 点击确认按钮handleSubmit(){// 触发：调用子组件方法，然后子组件再调用父组件方法// 重点this.$refs.resoluttionResult.callbackParentVal()},// 子组件调用的方法submitForm(subData) {console.log(subData) //subData 是子组件中通过ref触发该方法传递过来的子组件参数let params = {orgId: Id,...subData,}//这里调用后端接口传递参数},// 调用详情接口：读取数据，回显在子组件中init() {this.$services.apiCreditDetailIdList({method: 'get',params: {creditId: this.paramsInfo.creditId,orgId: Id,}}).then(res => {if (res && res.code === 2000) {// 将数据传递给子组件// 重点this.transRefInfo(res.data.kernelCreditApply)} else {this.$message.error(res && res.message)}})},// 传递给子组件信息transRefInfo(data) {//getSubInfo是子组件的一个方法// 重点this.$refs.resoluttionResult.getSubInfo(data)}, }
子组件：resolution-result
// 子组件：resolution-result<templete><el-form class="child-box" :model="form"><el-form-item label="企业" prop="guarant"><el-input v-model="form.guarant" size="small" placeholder="请输入"></el-input></el-form-item><el-form-item label="法人" prop="name"><el-input v-model="form.name" size="small" placeholder="请输入"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="form.address" size="small" placeholder="请输入"></el-input></el-form-item><el-form-item label="电话" prop="tel"><el-input v-model="form.tel" size="small" placeholder="请输入"></el-input></el-form-item></el-form></templete>created(){this.init()},methods:{// 父组件传递过来的信息getSubInfo(data) {Object.keys(this.form).forEach(item => {this.form[item] = data[item]})},// 父组件中调用的方法，callbackParentVal() {// 将表单信息回传给父组件// 重点this.$parent.submitForm({...this.form})},}
以上就完成了父于子，子于父之间的相互传参。
vue 父传子 子传父组件的多种方式；父组件直接调用子组件方法；子组件直接调用父组件方法
