Vue.js 使用插槽的VUE 3工作台

关于Vue3和插槽，我有一个非常具体的问题，我已经为可重用的表创建了以下组件.

FSTable.vue个

<template>
  <table>
    <thead>
      <slot renderAs="header"></slot>
    </thead>
    <tbody>
      <tr v-for="(row, index) of rows" :key="index">
        <slot renderAs="cell" :row="row"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
  const rows = [{
    name: "Row 1",
    col2: "XX",
    col3: "YY"
  },
  {
    name: "Row 2",
    col2: "XX",
    col3: "YY"
  },
  {
    name: "Row 3",
    col2: "XX",
    col3: "YY"
  }];
</script>

FSTableColumn.vue个

<template>
  <th v-if="props.renderAs === 'header'" class="p-2">
    <slot name="header" :header="props.header">
      {{ props.header }}
    </slot>
  </th>
  <td v-else-if="props.renderAs === 'cell'" class="p-2">
    <slot :value="props.property ? row[props.property] : row">
      {{ props.property ? row[props.property] : "" }}
    </slot>
  </td>
</template>

<script setup lang="ts">
  const props = defineProps<{
    renderAs?: string;
    header?: string;
    property?: string;
    row?: any;
  }>();
</script>

如您所见，FSTableColumn被呈现为标题或单元格.

Usage

<FSTable v-slot="slotProps">
  <FSTableColumn v-bind="slotProps" header="Column 1" property="name" v-slot="cellProps">
    <!-- This column renders a custom cell -->
    CustomCell: {{ cellProps.value }}
  </FSTableColumn>
  <FSTableColumn v-bind="slotProps" header="Column 2" property="col2">
    <!-- This column renders the default cell -->
  </FSTableColumn>
  <FSTableColumn v-bind="slotProps" header="Column 3" property="col3">
    <!-- This column renders a custom header -->
    <template #header="headerProps">
      CustomHeader: {{ headerProps.header }}
    </template>
  </FSTableColumn>
</FSTable>

Question 正如你所看到的，我需要从FSTable到FSTableColumn传递slotProps. 有没有可能go 掉这个并隐式地传递它们？