Passing slots to child components within a VueJS application - A helpful guide

Question

Passing slots to child components within a VueJS application - A helpful guide

Within my application, I frequently utilize a list and list_item component. To provide a general idea:

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>

For instances where I use the contact_list within a specific component, I aim to include a slot that adds additional columns to the contact_list_item component. This slot will utilize data from the particular contact being displayed in the contact_list_item component to create these extra columns.

What would be the best approach to achieve this? Would using slots be recommended?

Thank you in advance.

javascript vue.js components vuejs2 vue-component

Answer 1

Answer №1

To implement slots effectively, you will need to utilize a scoped slot for the contact-list-item component. If you are unfamiliar with Pug, you can use HTML as shown in the example below.

Within the contact-list component, make sure to include a slot. This allows us to pass the contact as a property and leverage 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>

Include a slot in the contact-list-item as well.

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

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

For a working example of this implementation, check out this CodePen demo. Note how the id column is now displayed within the contact-list-item.

Answer 2

To implement slots effectively, you will need to utilize a scoped slot for the contact-list-item component. If you are unfamiliar with Pug, you can use HTML as shown in the example below.

Within the contact-list component, make sure to include a slot. This allows us to pass the contact as a property and leverage 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>

Include a slot in the contact-list-item as well.

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

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

For a working example of this implementation, check out this CodePen demo. Note how the id column is now displayed within the contact-list-item.

Answer 3

Answer №2

Utilize the template tag to register a slot within a child component.

Sometimes, there may be a need for multiple named slots.

child.vue

<template>
  <div>
    <h2>I have become 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>Time to visit grandpa</h2>
    <child :babies="myGrandChilds">
      <button slot="myGrandChilds[2].name">baby cry</button>
    </child>
  </div>
</template>

Answer 4

Utilize the template tag to register a slot within a child component.

Sometimes, there may be a need for multiple named slots.

child.vue

<template>
  <div>
    <h2>I have become 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>Time to visit grandpa</h2>
    <child :babies="myGrandChilds">
      <button slot="myGrandChilds[2].name">baby cry</button>
    </child>
  </div>
</template>

Answer 5

Answer №3

Contribute to @DrSensor's response.

When working with Vue3, it is recommended to utilize dynamic slot names.

<template>
  <div>
    <h2>I've become a parent now</h2>
    <grandchild :babies="babies">
      <template v-for="(baby, id) in babies" #[baby.name]>
        <slot :name="baby.name"/>
      </template>
    </grandchild>
  </div>
</template>

Answer 6

Contribute to @DrSensor's response.

When working with Vue3, it is recommended to utilize dynamic slot names.

<template>
  <div>
    <h2>I've become a parent now</h2>
    <grandchild :babies="babies">
      <template v-for="(baby, id) in babies" #[baby.name]>
        <slot :name="baby.name"/>
      </template>
    </grandchild>
  </div>
</template>

Answer 7

Answer №4

If you're looking to easily move multiple slots down a level, check out the technique outlined in this reference. By making slight adjustments, you may even be able to transfer them further down.

Answer 8

If you're looking to easily move multiple slots down a level, check out the technique outlined in this reference. By making slight adjustments, you may even be able to transfer them further down.

Passing slots to child components within a VueJS application - A helpful guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize Google Maps to receive directions to a specific destination and discover current traffic conditions along the route using their comprehensive API

Upgrading from synchronous $.ajax() to AngularJS $http or vanilla JavaScript (XHR) for asynchronous calls

Rotate object within HTML table

Transforming the MUI CircularProgress into a half circle shape

Uninstalling NPM License Checker version

Using JQuery to Send Form Data with an Ajax POST Request

Guide to effectively utilizing Vue slot-scope feature within nested components

What triggers the invocation of the onerror handler in XMLHttpRequest?

Tips for styling the json response received from a servlet with jquery ajax

The utilization of a combobox in VueJS 3 alongside the Mitt event bus

The "useState" React Hook is restricted from being used in a class component. To utilize React Hooks, they can only be invoked within a React function component or a custom React Hook function

The escape character appears to be misunderstood, causing an error due to an invalid escape sequence

Is there a way to programmatically simulate clicking on the "Cancel search" button?

jQuery effects failing to run properly in Internet Explorer

"Discover the process of incorporating two HTML files into a single HTML document with the help of

Executing a JavaScript function to trigger a PHP script that saves data into a MySQL database

The module you are trying to access at './server/controller/controller.js' does not contain an export with the name 'default'

What is the reason behind the Typescript compiler not converting .ts files to .js files automatically?

Trigger Function on Input Change in Angular 2

Click event for jQuery horizontal accordion