VueJS - Pass slot to child of child component

Slots are the best approach and you will need to use a scoped slot for the contact-list-item component. I'm not really familiar with pug, so I will use HTML for the example.

In contact-list you would add a slot. Notice in this case that the contact is being passed as a property. This is so we can take advantage of 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>

Then add a slot to the 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>

Finally, in your Vue template, use the scoped template.

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

Here is a working example. I have no idea what your styles are but notice the id column is now displayed in the contact-list-item.

You can use template for registering slot to the child of child component.

There is also a case when you want to have many named slots.

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>