Vue3父组件访问子组件根元素的合规方案（无需defineExpose）

针对你用v-for动态导入组件、需要获取子组件根元素实现拖拽的场景，这里有几个无需依赖defineExpose的可行方案：

方案1：子组件主动通过事件传递根元素 #

子组件挂载完成后，直接把自身根元素通过自定义事件抛给父组件，父组件根据循环项的唯一标识（比如item的id）对应存储元素：

子组件代码 #

<script setup>
import { onMounted } from 'vue'

// 挂载后触发事件传递根元素
onMounted(() => {
  emit('send-root-element', $el)
})
</script>

<template>
  <div class="child-root">子组件内容</div>
</template>

父组件代码 #

<script setup>
import { ref } from 'vue'

const items = ref([/* 你的循环数据源 */])
// 用item的id作为键，存储对应子组件的根元素
const childElements = ref({})

// 接收子组件传递的元素并关联到对应item
const handleRootElement = (el, itemId) => {
  childElements.value[itemId] = el
}
</script>

<template>
  <div v-for="item in items" :key="item.id">
    <component 
      :is="item.component" 
      @send-root-element="(el) => handleRootElement(el, item.id)"
    />
  </div>
</template>

方案2：使用自定义指令绑定元素 #

自定义一个指令，在子组件根元素上绑定该指令，指令内部直接把元素同步到父组件的存储对象中，同时处理卸载时的清理避免内存泄漏：

父组件定义自定义指令 #

<script setup>
import { ref } from 'vue'

const items = ref([/* 循环数据源 */])
const childElements = ref({})

// 自定义注册根元素的指令
const vRegisterRoot = {
  mounted(el, binding) {
    // binding.value 接收父组件传递的item唯一标识
    childElements.value[binding.value] = el
  },
  unmounted(el, binding) {
    // 组件卸载时删除对应元素引用
    delete childElements.value[binding.value]
  }
}
</script>

子组件模板（无需修改脚本） #

<template>
  <!-- 根元素绑定指令，接收父组件传过来的item标识 -->
  <div class="child-root" v-register-root="itemId">子组件内容</div>
</template>

父组件使用动态组件时传递标识 #

<template>
  <div v-for="item in items" :key="item.id">
    <component 
      :is="item.component" 
      :item-id="item.id"
    />
  </div>
</template>

方案3：利用模板引用数组（Vue3） #

如果动态组件的渲染顺序和items数组顺序完全一致，可以直接用模板引用数组批量获取元素：

<script setup>
import { ref, onMounted } from 'vue'

const items = ref([/* 循环数据源 */])
const componentRefs = ref([])

onMounted(() => {
  // 遍历引用数组，取出每个组件的根元素
  const rootElements = componentRefs.value.map(ref => ref?.$el)
  // 后续可将rootElements与items关联使用
})
</script>

<template>
  <div v-for="item in items" :key="item.id">
    <component 
      :is="item.component" 
      ref="componentRefs"
    />
  </div>
</template>

这个方案适合结构简单、渲染顺序稳定的场景，无需子组件做任何修改。

内容的提问来源于stack exchange，提问作者Кирилл Десятов