- I have been automating the passing of any (and all) slots using v-for, as shown below.The nice thing with this method is that you don't need to know which slots have to be passed on, including the default slot.
- In this tutorial, we will learn about how to use the slots in vue.js with the help of examples. Slots helps us to pass the data between opening and closing component tags. In vue.js props are used to pass the data to its child components, but it is hard to pass when we have a complex code. In such cases slots can be used.
In this example, we've chosen to name the object containing all our slot props slotProps, but you can use any name you like. # Abbreviated Syntax for Lone Default Slots In cases like above, when only the default slot is provided content, the component's tags can be used as the slot's template.
Next Up, Let's review Named Slots in VueJS with the help of an example. We covered a lesson on slots in VueJS in the last section. slots help us to take the defined content inside the HTML markup of the component and put them in wherever specified in the template. The problem is it only works for a single default slot.
But what if we want to create more complex markup, where we are looking to accept different content from the user which we have to place at different locations.
Let's understand this with the help of an example.
We are looking to convert the Bootstrap Card markup to a Vue Component. Here is generic HTML markup of a Bootstrap card.
And this gives out a generic card styling in the output.
We want the user to be able to specify content to be slotted in the card header, card body, and card footer.
Named Slots in VueJS
Let's approach it using named slots in VueJS.
Here is the Vue Component code, we have defined the Bootstrap Card markup in our HTML and we have replaced the text with slot element.
Notice that the slots are named. The name of the first slot is header, The second one is without a slot that means this is the default slot, the name of the third slot is the footer.
Now let's see how we can pas content to different slots from our HTML markup.
Vue Slot Props Examples
We have defined the first template with v-slot:header directive inside the component markup. This denotes that text that should go into the header slot. There is a similar template with v-slot:footer directive which denotes the content that should go into footer slot.
Vue Slot Class
Also, there is HTML content defined without any directive which gives an indication to VueJS to put it inside the default slot.
Fallback Content
VueJS slots also have provision for fallback content is no content is supplied to the slot.
Notice our VueJS component for footer slot we have defined a fallback content.
If no content is supplied to the footer slot from the markup, then the slot will be replaced with the default content provided.
That's all about Named Slots in VueJS.
Related Articles
A component can be 100% responsible for generating its output, like in this case:
or it can also let the parent component inject any kind of content into it, using slots.
What is a slot? It's a space in your component output that is reserved, waiting to be filled.
You define a slot by putting in a component template:
When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:
If you put any content side the tags, that serves as the default content in case nothing is passed in.
Vue Slot Prop
A complicated component layout might require a better way to organize content, with multiple slots as well.
This is why Vue offers us named slots.
Named slots
With a named slot you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.
Anything outside any template tag is added to the main slot.
For convenience I use a page single file component in this example:
or it can also let the parent component inject any kind of content into it, using slots.
What is a slot? It's a space in your component output that is reserved, waiting to be filled.
You define a slot by putting in a component template:
When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:
If you put any content side the tags, that serves as the default content in case nothing is passed in.
Vue Slot Prop
A complicated component layout might require a better way to organize content, with multiple slots as well.
This is why Vue offers us named slots.
Named slots
With a named slot you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.
Anything outside any template tag is added to the main slot.
For convenience I use a page single file component in this example:
Here is how we can use it, providing the slots content, in a parent component:
There is a handy shorthand, #:
Note: Vue 2.6 deprecated the slot attribute in favor of v-slot, and requires it to be added to a template tag (while slot could be applied to any tag)
Scoped slots
In a slot, we can't access the data contained in the child component from the parent.
Vue recognizes this use case and provides us a way to do so:
In the parent we can access the dog name we passed using:
slotProps is just a variable we used to access the props we passed. You can also avoid setting a variable just to hold the props you pass to the child component, by destructuring the object on the fly:
Vue Watch Props
More vue tutorials:
