Maison  >  Questions et réponses  >  le corps du texte

Vue 3 comment passer des slots à travers plusieurs composants

<p>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. </p><p> Je souhaite transmettre différents composants de cellule dans mon composant de table. </p><p> Mais je ne sais pas comment <strong>passer un emplacement nommé via plusieurs nœuds enfants</strong>. </p><p> J'utilise <strong>Vue v3.2.45</strong></p> <p>Je souhaite pouvoir utiliser le slotProps</p><p> de mon emplacement nommé <code>cell</code> Comme je l'ai fait avec <code>id</code> et l'emplacement nommé <code>test</code></p> <p>J'ai créé un terrain de jeu ici pour être clair</p> <pre class="brush:js;toolbar:false;">// 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> </pre></p>
P粉216203545P粉216203545390 Il y a quelques jours528

répondre à tous(1)je répondrai

  • P粉644981029

    P粉6449810292023-08-27 18:28:41

    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>
    

    répondre
    0
  • Annulerrépondre