1、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上

//一、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上

<div class="formBtn fl" @click="setBtn('4')">111</div>
<div class="formBtn fl" @click="setBtn('3')">222</div>
<div class="formBtn fl" @click="setBtn('55')">333</div>

//子组件：（重点1：Vue中父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用）
<Set-Dialog :setDialogSave="setDialogSave" ref="SetDialog"></Set-Threshold-Dialog>


import SetDialog from '@/components/xxx/setThreshold.vue'

//在父组件中注册
components:{
   SetDialog
}


methods:{
    //this.$refs.eleTable.子组件的方法名+()
    //this.$refs.eleTable.子组件的属性名

    setThresholdBtn(type) {
        //重点2：此处为父组件调用子组件方法并传值
        this.$refs.SetDialog.show(type, this.multipleSelection)
        }
    }
}




子组件中的使用与子组件调用父组件的方法：
props:['setDialogSave'],

methods:{
    //在子组件中保存后回调父组件的(比如子组件弹窗保存成功后，刷新父组件列表数据)
    save(){
        this.setDialogSave()
    }，

    //在父组件中被调用过的show方法
    show(type, data) {
        //根据类型type和参数data调取接口
        this.showDialog = true//显示子组件弹窗
    }

}

2、在vue3.x中的变化

<Set-Dialog :setDialogSave="setDialogSave" ref="SetDialog"></Set-Threshold-Dialog>

import {ref} from 'vue'

setup() { 
   //ref方法
    const SetDialog= ref()  //SetDialog是页面ref后面对应的名字
    const clickSon = () => {
        SetDialog.value.changeShowText() //调用子组件的方法
        let arr = SetDialog.value.tableData //获取子组件setup里面定义的变量
    }
}