vue3 ref获取dom元素 原生标签与组件的差异

vue3 ref获取dom元素

最近刚开始用vue3，昨天写小组件的时候遇到一个问题。使用ref 原生标签可以直接拿到dom，而组件的dom一直取不到，后面才发现组件获取dom与原生标签有差异。

<template>
<input ref="input" />	// 原生input
<Popover ref="popover"> Popover>	// 组件popover
template>

<script setup>
import { ref, onMounted } from 'vue';
// ref	变量名需与ref属性命名一致
let input = ref(null);
let popover = ref(null);

onMounted(()=>{
	console.log('input',input.value);	// 直接获取dom
	console.log('popover',popover.value.$el);	// popover.value 获取到的是组件实例，dom需要 .$el 获取
})
</script>

同时，如果要用组件的属性或方法

1.子组件需要先使用defineExpose将其暴露出来如下：

<script setup>
// props
const props = defineProps({
    visiable: {
        type: Boolean,
        required: true
    },
})
let print1 = ()=>{
    console.log('1')
}
defineExpose({
    props,
    print1,
})
</script>

2.在父组件中获取组件实例，调用方法、属性：

<script setup>
onMounted(() => {
	popover.value.print1();
})
</script>

总结：

1.vue3获取组件dom需要使用.$el;
2.初始化时如果涉及dom，记得在onMounted()中，确保dom已渲染
3.vue3使用组件属性、方法需要先在组件中使用defineExpose()暴露出来