VueJS - 子コンポーネントの子にスロットを渡す

Question

私はアプリケーションの中でたくさん再利用するリストとlist_itemコンポーネントを持っています。

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> 

私は、特定のコンポーネント内contact_listを使用する場合は、私が送信できるようにしたい：簡略化した形でcontact_list_itemコンポーネントに新しい列を追加します。このスロットは、新しい列を生成するためにcontact_list_itemコンポーネント内でレンダリングされている特定の連絡先のデータを使用します。

どうすれば達成できますか？スロットを最善の方法で使用していますか？

ありがとうございます。

Answer 1

スロットは最適な方法であり、contact-list-itemコンポーネントの有効範囲スロットを使用する必要があります。私は本当にpugに精通していないので、例としてHTMLを使用します。

contact-listには、スロットを追加します。この場合、連絡先がプロパティとして渡されていることに注目してください。これはscoped slotsを利用できるようになったためです。

<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> 

そして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> 

最後に、Vueテンプレートでスコープ付きテンプレートを使用します。

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

ここにはworking exampleがあります。あなたのスタイルが何であるか分かりませんが、idの列がcontact-list-itemに表示されています。

Answer 2

templateは、子コンポーネントの子へのスロットの登録に使用できます。

多くの名前付きスロットが必要な場合もあります。

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> 

grandchild.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>