当我们对UI组件进行二次封装的时候,我们通常会用到UI组件的实例方法,这个时候我们就需要在父组件中拿到子组建中UI组件的实例,获取子组件dom有两种情况
不使用setup语法糖的情况
这中情况下我们可以使用this,可以将UI组件的实例直接挂到当前组件实例上,具体代码如下
<template>
<div >
<el-input ref="inpRef" v-model="input" placeholder="Please input" />
</div>
</template>
<script>
export default{
mounted() {
const entries = Object.entries(this.$refs.inpRef)
for( const [key,value] of entries){
this[key] = value
}
}
}
</script>
父组件调用
<template>
<input-my ref="myRefInput"></input-my>
</template>
<script setup>
const myRefInput = ref()
onMounted(()=>{
myRefInput.value.focus()
})
</script>
使用setup的情况下
这个时候我们无法使用this,注意在setup中setup是封闭的,不会将子组件事件暴露出来,所以要用defineExpose(),将需要在父组件调用的函数暴露出去,子组件代码如下
<template>
<div >
<el-input ref="inpRef" v-model="input" placeholder="Please input" />
</div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue'
const input = ref('');
const inpRef = ref();
function getDom(){
return inpRef.value
}
defineExpose({
getDom,
})
</script>
父组件调用
<template>
<input-my ref="myRefInput"></input-my>
</template>
<script setup>
const myRefInput = ref()
onMounted(()=>{
myRefInput.value.getDom().input.focus()
})
</script>