Vue 3 如何透過多個元件傳遞槽

Question

我正在嘗試使用指定的儲存格來建立一個可在整個專案中重複使用的巨大表格。

我想將不同的單元格元件傳遞到我的表格元件中。

但我不知道如何透過多個子節點傳遞一個命名槽。

我正在使用 Vue v3.2.45

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

就像我對 id 和命名槽 test

所做的那樣

我在這裡創建了一個遊樂場來讓自己清楚

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

const table = ref<ITable>({
  tree: [
    { data: [{ 值: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
    { data: [{ 值: '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>