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