Vue 3, wie man Slots durch mehrere Komponenten leitet
P粉216203545
2023-08-27 00:15:30
<p>Ich versuche, eine große Tabelle mit bestimmten Zellen zu erstellen, die im gesamten Projekt wiederverwendet werden kann. </p><p>
Ich möchte verschiedene Zellkomponenten an meine Tabellenkomponente übergeben. </p><p>
Aber ich weiß nicht, wie ich <strong>einen benannten Slot durch mehrere untergeordnete Knoten weiterleiten kann</strong>. </p><p>
Ich verwende <strong>Vue v3.2.45</strong></p>
<p>Ich möchte die SlotProps</p><p> meines benannten Slots <code>cell</code> verwenden können
Wie ich es mit <code>id</code> und dem benannten Slot <code>test</code></p>
<p>Ich habe hier einen Spielplatz geschaffen, um mich deutlich zu machen</p>
<pre class="brush:js;toolbar:false;">// 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>
</pre>
<pre class="brush:js;toolbar:false;">// 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>
</pre>
<pre class="brush:js;toolbar:false;">// Row.vue
<Vorlage>
<div class="row">
<div class="cell" v-for="(cell, cellI) in row.data"
<slot name="cell" :cell="cell"
</div>
</div>
</template>
</pre></p>
您可以在
Table
组件中公开cell
插槽,并在App.vue
中使用它