vue3中父组件拿到子组件的dom实例

当我们对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>