Detailed analysis of the usage and application scenarios of slots in Vue

What are slots?

We know that in Vue, nothing can be wrapped in the middle of the Child component tag.

But often when we use components, we always want to customize some tags outside the components. Vue has added a slot mechanism called scope slot. The required version is 2.1.0+;

Slots are actually placeholders. It takes up a place in your HTML template in the component and lets you pass something in. Slots are divided into anonymous slots, named slots, and scoped slots.

In 2.6.0, we introduced a new unified syntax for named and scoped slots (the v-slot directive). It replaces slot and slot-scope

Anonymous Slots

Anonymous slot, we can also call it a single slot or default slot. Compared with named slots, it does not need to set the name attribute, and its hidden name attribute is default.

father.vue

child.vue

For anonymous slots, the name attribute corresponds to default, and you can also leave it blank to use the default value.

There is another problem to note when using it. If there are more than 2 anonymous slots, the contents of the child tag will be replaced in each slot;

Named slots (vue2.6.0+ deprecated slot='name')

As the name implies, slots are named. Definition: Or use a simple abbreviation to define #header. Use: Wrap it with a template tag.

father.vue

child.vue

Here is a discussion of the use of multiple named slots. The position of the slot is not determined by the position of the slot being used, but is replaced by the position when it is defined.

father.vue

child.vue

Scoped Slots

It is the slot used to transfer data.

When you want to use data in a slot, you need to pay attention to the problem of scope. The Vue official documentation says that all content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope;

To make the data in the child component available in the parent's slot content, we can bind the data as a property of the element: v-bind:text="text"

Notice:

The difference between anonymous scope slots and named scope slots is v-slot:defult="accepted name" (defult (anonymous can be omitted, the opposite of named is to write the corresponding name))

v-solt can deconstruct and receive. The fields received by deconstruction must be the same as the fields passed. For example: one corresponds to v-slot="{one}"

Rendering

Summarize

This concludes this article about the usage and application scenarios of slots in Vue. For more information about the usage of Vue slots, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!