1. Vue Slots Example
2. Slots Vue Examples
3. Slots Vue Example Online
4. V-slot Vue Example
5. Injecting Vue Component Into Slot

Because Vue-Multiselect always uses it’s own internal copy of the value it never mutates the:value by itself, which means it can can safely used with Vuex or even Redux. In Vue 2.0 v-model is just a syntax sugar for:value and @input. Because of this we can use the @input event to trigger Vuex actions or mutations. In our previous adventure, we looked at Vue’s basic slots.Scoped slots allow us to expose a piece of data, through the scope, to the parent that is using it. In the last part of this article, we looked at the most basic form of Vue’s slot.We learned how to create basic components that allow passing any sort of structure and data into them, and we took a look at how to create multi-slot. For real-life, powerful examples of scoped slot usage, we recommend browsing libraries such as Vue Virtual Scroller, Vue Promised, and Portal Vue. Deprecated Syntax The v-slot directive was introduced in Vue 2.6.0, offering an improved, alternative API to the still-supported slot and slot-scope attributes. Vue 3 Router by Example. The router is an important component for building SPAs or single page apps so just like any front-end library Vue has its own router. With Vue 3, we have a new Vue Router that uses Vue 3, with many features similar to Vue 3, but there are a few differences from Vue 2. Another powerful feature that Vue gives us with slots is named slots. Sometimes you will find yourself in a situation where you want to be able to give the user of your component the ability to display custom content on several different places of your component. In such cases, named slots are your friend. Consider our sandwich example.

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.

Vue Slots Example

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.

Slots Vue Examples

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:

Slots Vue Example Online

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:

V-slot Vue Example

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

Injecting Vue Component Into Slot

Output of rendered html: