We have the Layout component with multiple slots. Then in the test, we mount the components with all the slots filled. The keys have the slot names, the values are the HTML we want to put inside it. Then we can check the HTML that’s rendered in the last 3 lines. We can test Vue 3 custom input components and slots with Vue Test Utils. The slot and slot-scope attributes will continue to be supported in all future 2.x releases, but are officially deprecated and will eventually be removed in Vue 3. Named Slots with the slot Attribute. Deprecated in 2.6.0+. See here for the new, recommended syntax.

• Vue Slots In Reaction
• Vue Slots Not Reactive

Slots allow you to embed arbitrary content in a Vue component. Slots are the Vue equivalent to transclusion in Angular and child props in React.

Vue Slots In Reaction

• These are render props in React and scoped slots in Vue. They work very similarly and provide a way to separate the behavior of a component from its presentation. Render props in React First, let’s look at how we would restructure our autocomplete component using render props in React.
• React.js and Vue.js are both great frameworks. And Next.js and Nuxt.js even bring them to the next level, which helps us to create the application with less configuration and better maintainability. But if you have to switch between those to frameworks frequently.

For example, suppose you wanted a component called green that added a green background behind child content. Here's an example of such a component using slots.

You can also define default inner HTML. If there's no inner HTML underneath <green></green>, Vue will use the inner HTML of <slot></slot> as shown below.

Named Slots

Sometimes you need multiple slots. For example, suppose you're writing a brand component that has two slots, 'name' and 'logo'.

The output HTML looks like this:

Here's the rendered HTML:

More Vue Tutorials

You know how to pass data into a slot by using scoped slots, but how do you communicate back?

You pass a method into our slot and then call that method in the slot. You can't emit an event, because slots share the same context (or scope) as the parent component.

In this article we'll cover why this works, as well as:

• Emitting from slot to parent
• What it means when a slot shares scope with the parent
• Emitting from slot to grandparent component
• A more in-depth look at how you can communicate back from a slot using methods

Emitting from a slot to the parent

Let's take a look at just the Parent component for now:

We have a button inside of the slot of the Child component. When that button is clicked, we want to call a method inside of the Parent component.

If the button wasn't in the slot, but instead a child of the Parent component directly, we have access to the method on the component:

The same is true for when that button component is inside of a slot:

This works because the slot shares the same scope as the Parent component.

Slots and template scope

I've talked about scope in Vue components before, but this is a new type of scope that I haven't talked about.

(I'll call this one 'template scope', and I'll need to do a follow-up to that article at some point!)

This is what template scope is: everything inside of a template has access to everything defined on a component.

This includes all elements, all slots, and all scoped slots.

So no matter where that button is located in the template, it has access to the handleClick method.

This may seem weird at first, and it's one of the reasons why slots are tricky to understand. The slot ends up being rendered as a child of our Child component, but it doesn't share scope with the Child component. Instead, it acts as if it's a child of the Parent component.

I explore this idea — that slots pretend to be something they're not — more in this article.

Vue Slots Not Reactive

Emitting from a slot to the grandparent

If we want to emit from the slot to the grandparent component, we use the regular $emit method:

Because the slot shares the same template scope as the Parent component, calling $emit here will emit an event from the Parent component.

Emitting from a slot back to the child

What about communicating back to the Child component?

We just saw that calling $emit in the slot will emit an event from the Parent to our Grandparent component, so that's ruled out.

But we know how to pass data into the slot from the child:

And how to use it within the scoped slot:

Instead of just passing data, we can also pass methods into the scoped slot. If we hook up those methods in the right way, we can use that to communicate back to the Child component:

Whenever the button is clicked, the handleClick method from the Child component is called.

If you're interested in learning more about these kinds of patterns, I have a course on Reusable Components that covers slots in extreme detail.