如何在Vue 3中访问父组件中的子组件的根元素

Question

我确实知道defineExpose函数，但这似乎是一个不好的做法，所以我正在寻找适当的解决方案，这可能有助于我。提前回答一个问题——是的，我真的需要in，因为在父组件中有v-for，每次迭代都有动态组件导入，我把它传递给in:is属性中的元素。我需要实现自定义拖放逻辑，所以我需要子组件的根HTML元素。

Answer 1

如果你需要根HTML元素，你可以给你的组件分配一个ref，当组件被挂载，并且HTML本身是在refName.value.$el

<template>
<div>
<component :is="Child" ref="myComp" />
</div>
</template>
<script setup>
import Child from '@/components/Child.vue';
import { ref, onMounted } from 'vue';
const myComp = ref(null);
onMounted(() => {
console.log(myComp.value.$el);
});
</script>