Vuejs 3如何将变量传递给槽内的所有元素

我正在使用 VueJs 3 创建一个动态表组件，其中涉及将循环索引变量发送到插槽内的所有子组件

组件的用法如下

<template>
  <h1>my table</h1>
  <MyTable
    :source="[
      { fname: 'Jhon', lname: 'Smith' },
      { fname: 'Arthur', lname: 'Cromer' },
    ]"
  >
    <MyTableColumn cellTitle="First Name" cellValue="fname"></MyTableColumn>
    <MyTableColumn cellTitle="Last Name" cellValue="lname"></MyTableColumn>
  </MyTable>
</template>

上面显示了我想要实现的目标，您可以在其中设置表数据源（数组）和任意数量的列，其中每列接受标题和单元格值。

我不确定如何将迭代索引（v-for 索引）发送到槽内的所有组件。

这是 MyTable.vue 模板

<template>
  <table>
    <tr v-for="(row, index) in $props.source" :key="index">
      {{
        (currentRow = index)
      }}
      <slot></slot>
    </tr>
  </table>
</template>

我尝试过作用域插槽但没有帮助。 并尝试通过提供 MyTable.vue 中的索引并将其注入到 MyTableColumn.vue 的每个实例中来尝试提供/注入技术，但这并没有按预期工作，因为注入的变量始终具有最后一个索引。不确定是否需要使用渲染功能。

在过去的几天里，我一直在尝试寻找解决方案，但没有运气。

在这里您可以访问完整的代码演示，其中有意外的行为

渲染行

您可以使用作用域槽传递数据MyTable.vue到它的槽孩子：

1. In MyTable.vue，绑定值index and row to the <slot>:

<tr v-for="(row, index) in $props.source" :key="index">
  <slot :index="index" :row="row"></slot>
</tr>

2. In App.vue， 使用权MyTable.vue的插槽道具通过v-slot on a <template>，并将它们绑定到MyTableColumn的道具：

<MyTable
  :source="[
    { fname: 'Jhon', lname: 'Smith' },
    { fname: 'Arthur', lname: 'Cromer' },
  ]"
>