如何从Parent组件层级向嵌套的TablePackage传递自定义列模板？

我们项目中使用TablePackage组件，该组件支持通过传入以列名命名的模板（如示例中的status）并结合插槽属性row来自定义列值的渲染方式，示例代码如下：

<!-- 代码片段1 -->
<!-- 此时status列的每一行都会显示状态按钮，而非纯文本 -->
<TablePackage>
  <template #status="{ row }">
    <button>{{ row.status }}</button> 
  </template>
</TablePackage>

现有Parent和Dialogue两个组件，Parent组件调用Dialogue组件，Dialogue组件内部调用TablePackage组件，代码如下：

Parent组件：

<Dialogue title="dialogueTitle">
</Dialogue>

Dialogue组件：

{{ title }}
<TablePackage rows="rowList" columns="columnObj">
</TablePackage>

现在希望从Parent组件层级实现如代码片段1中的自定义列渲染效果，即将status列渲染为按钮而非文本，但尝试嵌套模板的方式不可行。约束条件：仅允许修改Parent和Dialogue组件，无法修改TablePackage组件。请问推荐的实现方案是什么？

推荐实现方案 #

核心思路是让Dialogue组件做插槽透传的中间层，把Parent传入的自定义列模板转发给内部的TablePackage，具体步骤如下：

1. 修改Dialogue组件，实现插槽透传 #

在Dialogue组件中，遍历并透传所有来自Parent的命名插槽给内部的TablePackage，同时保留插槽的作用域属性：

{{ title }}
<TablePackage rows="rowList" columns="columnObj">
  <!-- 自动透传所有命名插槽给TablePackage -->
  <template #[slotName]="slotProps" v-for="(_, slotName) in $slots">
    <slot :name="slotName" v-bind="slotProps"></slot>
  </template>
</TablePackage>

2. 在Parent组件中传入自定义列模板 #

现在可以直接在Parent组件里给Dialogue传入status列的自定义模板，用法和直接给TablePackage传插槽完全一致：

<Dialogue title="dialogueTitle">
  <template #status="{ row }">
    <button>{{ row.status }}</button> 
  </template>
</Dialogue>

补充优化（可选） #

如果只需要支持特定列的自定义（比如仅status），也可以不用遍历所有插槽，单独指定透传：

<!-- Dialogue组件中单独透传status插槽 -->
<TablePackage rows="rowList" columns="columnObj">
  <template #status="{ row }">
    <slot name="status" :row="row"></slot>
  </template>
</TablePackage>

这种方式更精准，但遍历所有插槽的方式扩展性更强，后续要加其他列的自定义时无需修改Dialogue组件。

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