Spread the love Related Posts How to create more complex slots in VueVue.js is an easy to use web app framework that we can use to develop Passing Props to Vue.js Route Components with Vue RouterVue.js is an easy to use web app framework that we can use to develop Create Styled Vue Components Easily. Vue.js simplified: components, props, and slots December 10, 2020 8 min read 2425 In this article, we will be using Vue.js, Vue CLI and Bootstrap CSS. 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. Vue.js has slots in order to make components have a redefinable structure, but by themselves they're pretty limited. Sometimes you need some data or state in order to define how a component should render. If you don't know slots, I suggest you learn them first on the Vue.js docs. Scoped slots is an advanced feature in Vue.js that allows you to.

In this tutorial, we will learn about how to use the slots in vue.js with the help of examples.

What are Slots?

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.

Let’s create a new component called Post by adding the <slot> element.

Now, if we pass any content between the Post component opening and closing tags that are rendered in the place of <slot></slot> element.

Output:

Named Slots

Sometimes, we need to pass the data to a specific places in such cases named slots can be used.

The named slots can be created by adding a name attribute to the <slot> element.

To pass the content to the named slots we need to use v-slot directive on template providing slot name as v-slot argument.

Fallback data

In some cases, we can use fallback data (aka default) when data is not passed to a slot.

For example:

In the above component, we have added a Submit text inside a slot element.

Now, If we use a my-button component without passing any data we can seethe fallback data Submit text is rendered inside the button.

Output of rendered html:

But, if we pass data to the my-button component fallback data is replaced.

Output of rendered html:

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.

Vuetify Slot Props

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 <slot> 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 <template> 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

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.

Slot Props Vueling

Once again, let’s just check out an example.

Vue Slot Props 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

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.

Slot-scope= Props Vuetify

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.

Slot Props Vue App

As always, for more information and to get into the more technical details, check out the Vue documentation.

Vue Props Slot

Happy Coding!