Introduction
One of the ways to forward the content from the parent component is to insert it between the custom tag that represents the instance of the component. This mechanism is used when we have similar components that differ only in content, because this way we avoid creating two separate components. The
Child component accepts the passed content, and the “slot” element defines the place in the component where the passed content should be inserted.
Example
Unnamed slot
This is the simplest way to pass some content from the root Vue instance (or parent component) to a child component. That content is passed between the HTML tags that represent the instance of the child component. It has already been mentioned that the contents will be used when rendering the instance at the place where the <slot></slot> element is located.
Root instance:
|
1 2 3 |
<alert-box> <h3>Something bad happened.</h3> </alert-box> |
Component
The component accepts the passed content and displays it in place of the slot tag
|
1 2 3 4 5 6 7 |
Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <slot></slot> </div> ` }) |
When the component is rendered, the passed content will come into the slot tag.
NOTE:
Inline content styling must be styled from a child component.
Dynamic content can also be passed to the component:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<alert-box> <h3>{{ poruka }}</h3> </alert-box> <script> new Vue() { el: 'app' data: { poruka: "Something bad happened." } } </script> |
And such a component accepts the passed content exactly the same and displays it in place of the slot tag. Therefore, dynamic content will be rendered in place of the slot HTML tag, which in this case is “<h3>Something bad happened.</h3>”
Named slot
Vue 3 note (2026): In Vue 3, prefer v-slot:name / #name. The old slot="name" attribute syntax is removed in Vue 3.
In case there are several slots, it is necessary to assign a name to each slot to distinguish them from each other:
Root instance
|
1 2 3 4 5 6 |
<content-box> <h1 slot="title">Naslov</h1> <div slot="content"> <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p> </div> </content-box> |
Component
The component accepts the passed content and displays it in place of the corresponding slot tag:
|
1 2 3 4 5 6 7 8 |
Vue.component('content-box', { template: ` <div class="container"> <slot name="title"></slot> <slot name="content"></slot> </div> ` }) |
Default slot
It should be emphasized that if one of the slots does not have a defined name, it will behave as the so-called. default slot that marks the place where all forwarded content that is not specifically marked will be displayed.
Root instance
|
1 2 3 4 5 6 |
<content-box> <h1 slot="title">Naslov</h1> <div> <p>Lorem ipsum dolor sit amet, conarchitecto cumque nostrum provident, qui rem!</p> </div> </content-box> |
Component
The named slot “<slot name="title"></slot>” accepts its content in a tag marked with v-slot:title / #title (Vue 2 used slot=”title”), while the unnamed slot accepts all untagged content passed:
|
1 2 3 4 5 6 7 8 |
Vue.component('content-box', { template: ` <div class="container"> <slot name="title"></slot> <slot></slot> </div> ` }) |