第一种方式：通过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: this.paramsInfo.orgId,
                    ...subData,
                }
                //这里调用后端接口传递参数
            },


        // 调用详情接口：读取数据，回显在子组件中
        init() {
                this.$services.apiCreditDetailIdList({
                    method: 'get',
                    params: {
                        creditId: this.paramsInfo.creditId,
                        orgId: this.paramsInfo.orgId,
                    }
                }).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
                        })
               
            },
       


}
 

以上就完成了父于子，子于父之间的相互传参。