web-dev-qa-db-fra.com

VueJS - Passer l'emplacement à l'enfant du composant enfant

J'ai une liste et un composant list_item que je réutilise beaucoup dans mon application. Sur un formulaire simplifié:

contact_list.vue

<template lang="pug">
    .table  
      .table-header.table-row
        .table-col Contact
        .table-col Info

      .table-body
          contact-list-item(v-for='contact in contacts',
                            :contact='contact',
                            @click='doSomething()')

</template>

contact_list_item.vue

<template lang="pug">
.table-row(@click='emitClickEvent')
  .table-col {{ contact.name }}
  .table-col {{ contact.info }}
</template>

Lorsque j'utilise contact_list à l'intérieur d'un composant spécifique, je veux pouvoir envoyer un slot qui ajoutera de nouvelles colonnes au composant contact_list_item. Cet emplacement utilisera les données du contact spécifique qui est rendu à l'intérieur de ce composant contact_list_item pour générer les nouvelles colonnes.

Comment pourrais-je y parvenir? L'utilisation de la fente est-elle la meilleure approche?

Merci d'avance.

javascriptvue.jscomponentsvuejs2vue-component
14
felipeecst

Les emplacements sont la meilleure approche et vous devrez utiliser un emplacement limité pour le contact-list-item composant. Je ne connais pas vraiment le pug, donc j'utiliserai HTML pour l'exemple.

Dans contact-list vous ajouteriez un emplacement. Notez dans ce cas que le contact est transmis en tant que propriété. C'est ainsi que nous pouvons profiter de emplacements de portée .

<div class="table">
  <div class="table-header table-row">  
    <div class="table-col">Contact</div>
    <div class="table-col">Info</div>
  </div>
  <div class="table-body">
    <contact-list-item v-for='contact in contacts'
                       :contact="contact"
                       @click="doSomething"
                       :key="contact.id">
      <slot :contact="contact"></slot>
    </contact-list-item>
  </div>
</div>

Ajoutez ensuite un emplacement au contact-list-item.

<div class="table-row" @click="emitClickEvent">
  <div class="table-col">{{contact.name}}</div>
  <div class="table-col">{{contact.info}}</div>
  <slot></slot>
</div>

Enfin, dans votre modèle Vue, utilisez le modèle de portée.

<div id="app">
  <contact-list :contacts="contacts">
    <template scope="{contact}">
      <div class="table-col">{{contact.id}}</div>
    </template>
  </contact-list>
</div>

Voici un exemple de travail . Je n'ai aucune idée de vos styles mais remarquez que la colonne id est maintenant affichée dans le contact-list-item.

10
Bert

Vous pouvez utiliser template pour enregistrer l'emplacement sur le composant enfant du composant enfant.

Il existe également un cas où vous souhaitez avoir de nombreux emplacements nommés.

child.vue

<template>
  <div>
    <h2>I'm a father now</h2>
    <grandchild :babies="babies">
      <template v-for="(baby, id) in babies" :slot="baby.name">
        <slot :name="baby.name"/>
      </template>
    </grandchild>
  </div>
</template>

petitchild.vue

<template>
  <div>
    <p v-for="(baby, id) in babies" :key="id">
      <span v-if="baby.isCry">Owe...owe...</span>
      <slot :name="baby.name">
    </p>
  </div>
</template>

parent.vue

<template>
  <div>
    <h2>Come to grandpa</h2>
    <child :babies="myGrandChilds">
      <button slot="myGrandChilds[2].name">baby cry</button>
    </child>
  </div>
</template>
1
DrSensor