Slot Vue Js

A component can be 100% responsible for generating its output, like in this case:

1. Vue Js Slot Event
2. Nested Slots Vue Js

Vue implements a content distribution API inspired by the Web Components spec draft(opens new window), using the slotelement to serve as distribution outlets for content. This allows you to compose components like this. V-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。 带有 slot attribute 的具名插槽.

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.

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.

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

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)

Vue Js Slot Event

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:

Nested Slots Vue Js

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

While basic component slots are all fine and dandy, sometimes you want the template inside the slot to be able to access data from the child component hosting the slot content. For example, if you’re trying to allow custom templates in a container while still retaining access to those containers’ data properties, you’ll want to use a scoped slot.

Introduction

Scoped slots are a new feature introduced in Vue 2.1.0. They allow you to pass properties from your child components into a scoped slot, and access them from the parent. Sort of like reverse property passing.

The first step to creating a scoped component slot is to pass properties into a default or named slot from your child component, like so:

Then, to use those properties inside a parent component’s slot content, create a template element tied to the slot. Add a scope attribute to the template element and set it to the name that you wish to access the scope properties from. This essentially creates a local variable for anything inside that template, allowing you to access it as if it was in the parent’s scope.

(For example, scope=“myScope”, properties passed into the <slot> will be accessible as {{myScope.myProperty}} while scope=“yourScope” will be accessed as {{yourScope.myProperty}}.)

Note: The template element does not get added to the DOM. It’s simply a wrapper.

If you’re using Vue 2.5 or above, use the slot-scope attribute instead of scope. Also you can skip the template elements.