Vue Slot Props Example
It tells Vue which named slot to use, exposes the passed props, which we can destructure. This could be a method or data and works a bit like a render-function in React. Dynamic scoped slots. Right, the final piece of the puzzle. Dynamic scoped slots are much like regular scoped slots, but they have a name derived at runtime. Here’s an example: Props propagation through slots. I was expecting to get two children receiving the number 1 and two children receiving the number 2 but I’m getting the following error: Vue warn: Duplicate presence of slot 'default' found in the same render tree - this will likely cause render errors.
In this article, we will get a full understanding of the vue slots through the practical application of its various use cases. Lets start with know about vuejs slots first.
What is Vue Slot?
Slots are reserved space offered by vuejs to display content passed down from one component to another. There are two types of the slot in vuejs namely: named slot and unnamed(default) slot.
Looking for Vue Templates?
Here vuejs reserves two slots to display the content of the slot attribute with the value of message and name as separate contents. In this article, we have seen a practical use case of slots to transfer content from a parent component to a child component. For more information on the slot, check out the Vue documentation. 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.
- Try our Vue Templates and create stunning web applications for unlimited client projects and personal projects.
- Start building web applications and products using our Free Vuejs Templates without any investment.
Practical Use Case of Vue Slots
Vue Slot Props Examples
- To pass down Html elements from one component to another.
With props, Vue allows us to pass strings, objects, arrays, and functions from a parent component to its child component. While it is possible for us to pass HTML elements from a parent to its child component as a string this will make our website vulnerable to cross-site scripting attack that is why vuejs provides us with a slot which is a more secure and reliable method of passing HTML element and other contents from parent to its child component for rendering.
HOW TO USE SLOT In the child component where the content is to be displayed, add the slot tag as follows:
In this tutorial, we will generate our project with the Vue CLI
vue create slot-project
In the src folder create a components folder with parent.vue andchild.vue files
Adding the code below to child.vue
Add the code snippet below to parent.vue
Add the code snippet below to parent.vue
Here we imported the child component and pass down the HTML content to the child.
For these contents to be displayed in the child component, theslot tag must be added to the child component.
Lets add the slot tag to the child.vue file as follow:
In the app.js file add the parent.vue component
Now, we can verify that slot is working as expected.
Now our app should be like:
Vue Slot Examples
STYLING SLOT COMPONENT
For styling our slot component, the CSS styles should be added to the component with the slot tag.
So in child.vue component we will add the following styles to the HTML content received from the parent.vue component.
Using Multiple Slots
In order to use multiple slots in vue, vuejs provides us with away to name our slots.
What if we want the h2 and h3 tags in the parent component to be displayed individually in separate slots. This would be a typical use case for named slots.
In the Parent.vue component we will name our slots as follows:
In the child.vue component we will receive the named slot as follows:
Here vuejs reserves two slots to display the content of the slotattribute with the value of message and name as separate contents.
Conclusion
Vue Props Update
In this article, we have seen a practical use case of slots to transfer content from a parent component to a child component.
Vue Slot Class
For more information on the slot, check out the Vue documentation.