Vue组合式API中如何转发子组件暴露的属性？

当你封装Vue3组件时，父组件不会自动继承子组件通过defineExpose暴露的内容，必须显式将子组件的暴露内容向上转发。以下是两种可行方案：

方案一：手动转发指定属性与方法 #

适合子组件暴露内容较少的场景，可明确控制需要转发的项：

<template>
  <lq-table ref="tableRef" ... />
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue';
// 导入子组件类型（根据实际路径调整）
import LqTable from './lq-table.vue';

const tableRef = ref<InstanceType<typeof LqTable>>();

// 手动转发子组件的所有暴露内容
defineExpose({
  // 转发访问器属性
  get currentRowIdx() {
    return tableRef.value?.currentRowIdx;
  },
  set currentRowIdx(val) {
    tableRef.value && (tableRef.value.currentRowIdx = val);
  },
  get rowCount() {
    return tableRef.value?.rowCount;
  },
  // 转发方法
  dispatchKeys: (e: KeyboardEvent) => tableRef.value?.dispatchKeys(e),
  assign: (...args) => tableRef.value?.assign(...args),
  assignRow: (...args) => tableRef.value?.assignRow(...args),
  selectCell: (...args) => tableRef.value?.selectCell(...args),
  // 转发普通属性
  get selection() {
    return tableRef.value?.selection;
  },
  get columns() {
    return tableRef.value?.columns;
  }
});
</script>

方案二：使用Proxy自动转发 #

适合子组件暴露内容较多的场景，无需手动枚举所有项：

<template>
  <lq-table ref="tableRef" ... />
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue';
import LqTable from './lq-table.vue';

const tableRef = ref<InstanceType<typeof LqTable>>();

// 创建代理，自动转发子组件的属性与方法
const exposedProxy = new Proxy({}, {
  get(_, prop) {
    if (!tableRef.value) return undefined;
    const targetProp = prop as keyof InstanceType<typeof LqTable>;
    const value = tableRef.value[targetProp];
    // 绑定函数的上下文到子组件实例，避免this指向错误
    return typeof value === 'function' ? value.bind(tableRef.value) : value;
  },
  set(_, prop, value) {
    if (!tableRef.value) return false;
    const targetProp = prop as keyof InstanceType<typeof LqTable>;
    if (targetProp in tableRef.value) {
      (tableRef.value as any)[targetProp] = value;
      return true;
    }
    return false;
  }
});

// 暴露代理对象
defineExpose(exposedProxy);
</script>

关键注意点 #

1. 必须通过ref获取子组件实例，才能访问其暴露的内容；
2. 使用TypeScript时，要正确指定子组件的实例类型，避免类型报错；
3. 转发函数时需绑定子组件上下文（Proxy方案已处理），否则函数内部的this会指向错误的对象。

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