Vue 3, wie man Slots durch mehrere Komponenten leitet
P粉216203545
P粉216203545 2023-08-27 00:15:30
0
1
566
<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>
P粉216203545
P粉216203545

Antworte allen(1)
P粉644981029

您可以在 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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage