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.

When prop validation fails, Vue will produce a console warning (if using the development build). Note that props are validated before a component instance is created, so instance properties (e.g. Data, computed, etc) will not be available inside default or validator functions. Slot components can declare their own props, these props are then accepted at the top level FormulateInput and passed to the appropriate slot component as a prop. You can declare a slotProp for a specific type of input, or for all inputs. SlotProp declarations should always be an array of string values. # For all inputs types.

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

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:

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.

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 <slot></slot> 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 <slot></slot> tags, that serves as the default content in case nothing is passed in.

A complicated component layout might require a better way to organize content, with multiple slots as well.

Vue Js Slot Props For Sale

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.

Vue Js Slot Props Free

For convenience I use a page single file component in this example:

Vue Js Slot Props Download

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:

More vue tutorials: