拓展：vue 父组件调用子组件方法ref（且父组件可通过ref调用的方法传值给子组件）

本文主要是介绍拓展：vue 父组件调用子组件方法ref（且父组件可通过ref调用的方法传值给子组件），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 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里面定义的变量}
}

这篇关于拓展：vue 父组件调用子组件方法ref（且父组件可通过ref调用的方法传值给子组件）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---