Vue3封装组件时如何自动暴露子组件的全部方法？

在封装Vue组件时，我们可以通过v-bind="$attrs"自动传递props和自定义事件，但Vue并没有提供类似的语法直接自动传递子组件通过defineExpose暴露的内容。要实现这个需求，我们可以通过获取子组件实例，手动将其暴露的内容合并到当前组件的暴露对象中。

实现步骤 #

• 给子组件添加ref属性，用于获取其实例
• 在当前组件的defineExpose中，展开子组件实例的暴露内容，同时保留自身需要暴露的方法

修改后的MyComp代码示例 #

<template>
  <!-- others -->
  <ChildComp ref="childRef" v-bind="$attrs"/>
</template>

<script setup lang="ts">
import ChildComp from './ChildComp.vue'
import { ref } from 'vue'

const childRef = ref<InstanceType<typeof ChildComp>>()

defineExpose({
  myMethod: () => { /* ... */ },
  // 展开子组件暴露的所有内容
  ...childRef.value
})
</script>

注意事项 #

• 由于<script setup>是编译时语法，子组件实例的value在编译阶段可能还未初始化，但Vue会在运行时正确处理这个展开操作，确保子组件暴露的方法能被外部访问到
• 如果需要类型提示，可以利用InstanceType<typeof ChildComp>来约束ref的类型，这样在展开时能获得子组件暴露内容的类型支持

内容的提问来源于stack exchange，提问作者hdy