Vue 3, wie man Slots durch mehrere Komponenten leitet

Question

Ich versuche, eine große Tabelle mit bestimmten Zellen zu erstellen, die im gesamten Projekt wiederverwendet werden kann.

Ich möchte verschiedene Zellkomponenten an meine Tabellenkomponente übergeben.

Aber ich weiß nicht, wie ich einen benannten Slot durch mehrere untergeordnete Knoten weiterleiten kann.

Ich verwende Vue v3.2.45

Ich möchte die SlotProps

meines benannten Slots cell verwenden können Wie ich es mit id und dem benannten Slot test

Ich habe hier einen Spielplatz geschaffen, um mich deutlich zu machen

// App.vue
<script setup lang="ts">
{ ref } aus 'vue' importieren
{ ITable } aus './types.ts' importieren
Tabelle aus './Table.vue' importieren

const table = ref<ITable>({
  Baum: [
    { Daten: [{ Wert: '0' }, { Wert: '1' }, { Wert: '2' }, { Wert: '3' }] },
    { Daten: [{ Wert: '0' }, { Wert: '1' }, { Wert: '2' }, { Wert: '3' }] },
  ],
})
</script>

<Vorlage>
  <Tabelle :table="table">
    <template #cell="{ cell }">
      Hallo {{ cell.value }}
    </template>
    <template #test="{ id }">
      <div class="row">Zeile oben ist {{ id }}</div>
    </template>
  </Tabelle>
</template>

// Table.vue
<Vorlage>
  <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
<Vorlage>
  <div class="row">
    <div class="cell" v-for="(cell, cellI) in row.data"
      <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>