Vue Slots
Vue’s slots are a strong feature that enable more adaptable and reusable components.
To transport material from the parent component into the <template> of a child component, we use slots in Vue.
Slots
Thus far, we have only employed elements within <template> as self-closing tags, as demonstrated by this:
App.vue:
<template>
<slot-comp />
</template>q
Alternatively, we can enclose some material, such as a text, within opening and closing tags:
App.vue:
<template>
<slot-comp>Hello World!</slot-comp>
</template>
However, we must utilize the <slot> element inside the component in order to receive “Hello World!” inside the component and display it on our website. The <slot> tag serves as a placeholder for the content, which will be replaced by the material sent to the application after it has been constructed.
Example
SlotComp.vue:
<template>
<div>
<p>SlotComp.vue</p>
<slot></slot>
</div>
</template>
Slots as Cards
To create a card-like appearance, longer sections of dynamic HTML content can also be wrapped around slots.
Instead of sending data as props to construct content inside components as we did previously, we may now transmit the HTML content straight inside the <slot> tag.
Example
App.vue:
<template>
<h3>Slots in Vue</h3>
<p>We create card-like div boxes from the foods array.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
<p>{{x.desc}}</p>
</slot-comp>
</div>
</template>
To generate a card-like appearance around the content without affecting other divs in our application, we utilize a div around the <slot> and style the <div> locally as the material enters the component where the <slot> sits.
SlotComp.vue:
<template>
<div> <!-- This div makes the card-like appearance -->
<slot></slot>
</div>
</template>
<script></script>
<style scoped>
div {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
margin: 10px;
}
</style>
It is possible to construct new pieces with the same card-like frame around them by reusing components that produce a card-like frame around content.
In this example, we create a footer using the same component as the meal items.
Example
App.vue:
<template>
<h3>Reusable Slot Cards</h3>
<p>We create card-like div boxes from the foods array.</p>
<p>We also create a card-like footer by reusing the same component.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
</slot-comp>
</div>
<footer>
<slot-comp>
<h4>Footer</h4>
</slot-comp>
</footer>
</template>
Fallback Content
Fallback content can be created in the <slot> if a component is built without any content.
Example
This application’s fallback content is rendered because the initial component lacks any content.
App.vue:
<template>
<h3>Slots Fallback Content</h3>
<p>A component without content provided can have fallback content in the slot tag.</p>
<slot-comp>
<!-- Empty -->
</slot-comp>
<slot-comp>
<h4>This content is provided from App.vue</h4>
</slot-comp>
</template>
SlotComp.vue:
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>
