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.
我们观察一个 Vue 组件主要观察三点：props、event 以及 slots。对于 BaseComponent 组件而言，它接收一个数字类型的 props 即 test，并发射一个自定义事件，事件的名称是：customize-click，没有 slots。我们会这样使用该组件：. # Scoped slots Scoped slots are a common pattern in Vue and are well supported in Vue Formulate as well. Vue Formulate recommends using scoped slots for occasional overrides, but not as the primary method for extending Vue Formulate. Read the Preamble on custom input documentation for more detail.
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?
- 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
- 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
Casino slots with bonus. 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:
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:
Vue Slot Props App
Here vuejs reserves two slots to display the content of the slotattribute with the value of message and name as separate contents.
Conclusion
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.
Slots are another way in Vue for a component to inject content into a child component. This does this using template code.
In terms of final output, slots perform a similar function as props in Vue — getting data from a parent component to a child component. Slots are also helpful at creating reusable code.
However, whereas props pass data values to the component, slots can just pass direct template code. I think that this comes with a few benefits depending on the situation:
- Your child component is more reusable — you can pass it different components without worrying about a consistent format/data values
- It's a lot more flexible — you don't always have to fill every value whereas with props, you'd have to worry about checking if values exist using
v-if - This may be a personal thing, but I think the child component looks a lot more readable
I think the best way to wrap your head around slots is to just see an example of how to use them and what actually happens.
The Simplest Use Case
Starting off with slots is a typical use case in which we simply declare a slot in the child component and inject content using the parent component.
Let's check it out. First, let's setup a parent component called MyContainer.vue
Next, let's setup a child component MyButton.vue component.
When, MyButton.vue renders, the will be replaced by Click Me! — the content from the parent.
You can pass any sort of template from the parent component, it doesn't have to be just text. It can be a Font Awesome icon, image, or even another component.
- 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
- 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
Casino slots with bonus. 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:
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:
Vue Slot Props App
Here vuejs reserves two slots to display the content of the slotattribute with the value of message and name as separate contents.
Conclusion
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.
Slots are another way in Vue for a component to inject content into a child component. This does this using template code.
In terms of final output, slots perform a similar function as props in Vue — getting data from a parent component to a child component. Slots are also helpful at creating reusable code.
However, whereas props pass data values to the component, slots can just pass direct template code. I think that this comes with a few benefits depending on the situation:
- Your child component is more reusable — you can pass it different components without worrying about a consistent format/data values
- It's a lot more flexible — you don't always have to fill every value whereas with props, you'd have to worry about checking if values exist using
v-if - This may be a personal thing, but I think the child component looks a lot more readable
I think the best way to wrap your head around slots is to just see an example of how to use them and what actually happens.
The Simplest Use Case
Starting off with slots is a typical use case in which we simply declare a slot in the child component and inject content using the parent component.
Let's check it out. First, let's setup a parent component called MyContainer.vue
Next, let's setup a child component MyButton.vue component.
When, MyButton.vue renders, the will be replaced by Click Me! — the content from the parent.
You can pass any sort of template from the parent component, it doesn't have to be just text. It can be a Font Awesome icon, image, or even another component.
Need Multiple Slots? Name ‘Em!
The best way to organize a slot-based component system is to name your slots. This way you can make sure you're injecting content into the right part of your component.
As you would expect, this is done by adding a name attribute to the slot in your child component. Then, to add content from the parent, you simply have to make another element and pass the name in an attribute called v-slot
Let's see this in action.
Then a parent component.
Note: if a slot is not named. It will just have the name of default
Vue Component Slot
Passing Data Scoped Slots
Another neat thing about slots is that you can give the parent component scoped access to data inside the child.
For example, if the child component is using a data object to determine what it displays, we can make that data visible to the parent and use that while we pass our injected content.
Once again, let's just check out an example.
If we have this article header slot inside a child component Article.vue— in this case, our fallback data is the article title.
Now let's move on to the parent component. What happens if we want to change the content to show the article's description instead? We wouldn't be able to do this because our parent component does not have access to the the article object inside its child, Article.vue
Thankfully, Vue can handle this situation pretty easily. We can bind data from the child slot to the parent template with a simple v-bind
Vue Get Slot Props
Let's look at our modified div.
There. Our parent component has access to this attribute. Now, let's see how to access it.
Similar to when passing data to a component using props, our child component passes a props object with all of the bounded attributes as children.
All we have to do is name this object in our template and then we can access them. We'll name it articleInfo for now, but this is just a variable so you can use anything your heart desires.
Easy right?
Using Slots to Make Components More Flexible
Props are a great way to reuse components, but they have their limitations depending on your use case. Props tend to work best in components that have the same format and content, but just different values.
Sometimes you need to make your components a little more flexible and adaptible: maybe you want some components to have certain sections while depending on the what page it's on, you want to remove other sections.
By injecting your content using slots, it makes it easier to switch around the content of a component without having to worry about using template logic like v-if and v-else to handle rendering.
That's All Folks
I hope this little article helped teach you a thing or two about the possibilities of using slots to organize your Vue projects.
As always, for more information and to get into the more technical details, check out the Vue documentation.
Happy Coding!
