Vue 3 comment passer des slots à travers plusieurs composants

Question

J'essaie de créer un immense tableau avec des cellules spécifiées qui peuvent être réutilisées tout au long du projet.

Je souhaite transmettre différents composants de cellule dans mon composant de table.

Mais je ne sais pas comment passer un emplacement nommé via plusieurs nœuds enfants.

J'utilise Vue v3.2.45

Je souhaite pouvoir utiliser le slotProps

de mon emplacement nommé cell Comme je l'ai fait avec id et l'emplacement nommé test

J'ai créé un terrain de jeu ici pour être clair

// App.vue
<configuration du script lang="ts">
importer { ref } depuis 'vue'
importer { ITable } depuis './types.ts'
importer une table depuis './Table.vue'

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

<modèle>
  <Tableau :table="tableau">
    <template #cell="{ cellule }">
      Bonjour {{ cell.value }}
    </modèle>
    <template #test="{ id }">
      <div class="row">La ligne ci-dessus est {{ id }}</div>
    </modèle>
  </Tableau>
</modèle>
≪/pré>
<pre class="brush:js;toolbar:false;">// Table.vue
<modèle>
  <div class="table">
    <modèle v-for="(ligne, ligneI) dans table.tree" :key="ligneI">
      <Ligne :ligne="ligne" />
      <nom de l'emplacement="test" :id="rowI"
    </modèle>
  </div>
</modèle>
≪/pré>
<pre class="brush:js;toolbar:false;">// Row.vue
<modèle>
  <div class="ligne">
    <div class="cell" v-for="(cell, cellI) dans row.data" :key="cellI">
      <nom de l'emplacement="cellule" :cell="cellule" />
    </div>
  </div>
</modèle>

Answer 1

Vous pouvez l'utiliser dans 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>