Vue 3 如何通过多个组件传递槽

Question

我正在尝试使用指定的单元格创建一个可在整个项目中重复使用的巨大表格。

我想将不同的单元格组件传递到我的表格组件中。

但我不知道如何通过多个子节点传递一个命名槽。

我正在使用 Vue v3.2.45

我希望能够在 App.vue 中使用我的命名槽 cell 的 slotProps

就像我对 id 和命名槽 test

所做的那样

我在这里创建了一个游乐场来让自己清楚

// App.vue
<script setup lang="ts">
import { ref } from 'vue'
import { ITable } from './types.ts'
import Table from './Table.vue'

const table = ref<ITable>({
  tree: [
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
  ],
})
</script>

<template>
  <Table :table="table">
    <template #cell="{ cell }">
      Hello {{ cell.value }}
    </template>
    <template #test="{ id }">
      <div class="row">Row above is {{ id }}</div>
    </template>
  </Table>
</template>

// Table.vue
<template>
  <div class="table">
    <template v-for="(row, rowI) in table.tree" :key="rowI">
      <Row :row="row" />
      <slot name="test" :id="rowI" />
    </template>
  </div>
</template>

// Row.vue
<template>
  <div class="row">
    <div class="cell" v-for="(cell, cellI) in row.data" :key="cellI">
      <slot name="cell" :cell="cell" />
    </div>
  </div>
</template>

Answer 1

您可以在 Table 组件中公开 cell 插槽，并在 App.vue 中使用它

<!-- Table.vue -->
<template>
  <div class="table">
    <template v-for="(row, rowI) in table.tree" :key="rowI">
      <Row :row="row">
        <template #cell="{ cell }">
          <slot name="cell" :cell="cell"></slot>
        </template>
      </Row>
      <slot name="test" :id="rowI" />
    </template>
  </div>
</template>