Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Vue slot slot". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use Vue slot slot.

I. the meaning of the slot

Slot slot is a placeholder written in the code of the child component and used by the parent component. In the code, it is roughly written in the following form, which will be described in detail later.

The slot is actually digging a hole where the slot is written, waiting for the user of the component, the parent component, to fill it. After using slot slot in the child component, the parent component can fill the placeholder with content, including data, html code, components, etc., that is, when some part of the content of the child component is different from that of the root parent component, then we can use slot slot, depending on what is filled by the parent component.

Letting the parent component insert the html structure to the specified location of the child component is also a way of communication between components, which is suitable for the parent component = > child component

Needless to say, let's take a look at how to use slot.

Second, three ways to use the slot

1. Default slot

There are two components, App is the parent component and Child is the child component

The parent component code is as follows:

I am the parent component

Import Child from'. / components/Child'

Export default {

Name:'app'

Components: {

Child

}

}

.parent {

Width: 400px

Height: 400px

Background-color: # bfa

}

The code for the subcomponent:

I am a sub-component

I am the default slot, and this sentence will only appear when the parent component is not filled with anything.

Export default {

Name:'Child'

Data () {

Return {

}

}

}

.child {

Width: 200px

Height: 200px

Background-color: lightblue

Margin: auto

}

Start the project and display it in the browser:

At this point, we have used slot to make up a pit in the subcomponent, but we haven't populated the content yet, so let's populate the content:

As you can see, the filled content is indeed displayed in the subcomponent.

If we drop the slot of the child component, can the parent component still see the content filled in the child component? Let's have a try:

You can see: in the browser, only the original information of the two components is displayed, and the content filled by the parent component cannot be seen.

In slot, you can fill not only text, but also pictures, videos, HTML structures, etc., such as filled pictures:

The browser displays as follows:

two。 Named slot

A named slot, as the name implies, is a slot with a name, with the name attribute, and a slot without a name with the default name default.

In the subcomponent, slot specifies the name property

I am a sub-component

I am the default content of the slot, and this sentence will only appear when the parent component is not filled with anything.

Export default {

Name:'Child'

Data () {

Return {

}

}

}

.child {

Width: 200px

Height: 200px

Background-color: lightblue

Margin: auto

}

In the parent component, you need to use template, and in the template template, specify the name value of slot in the child component

I am the parent component

This is what the parent component populates in the child component, which is displayed in the child component

Import Child from ". / components/Child"

Export default {

Name: "app"

Components: {

Child

}

}

.parent {

Width: 400px

Height: 400px

Background-color: # bfa

}

Img {

Width: 200px

}

The browser can display the filled content normally:

Suppose we only write template in the parent component and do not specify the name value of slot in the child component

So, in the browser:

That is, in the code that refers to the subcomponent, the slot in template looks for the corresponding slot slot according to the value after the equal sign =, so that the corresponding content is filled in the corresponding position. When we use a large number of slots, named slots are very practical.

3. Scope slot

If the data is in the sub-component, the data can be used directly in the sub-component, but according to the structure generated by the data, we need to use the scope slot, and we can also implement a variety of structures.

For example, the games data is in the child component, but the structure traversed with the data is determined by the parent component App

In the subcomponent, use to indicate what data to use and pass the data to the user of the slot

I am a sub-component

{{title}}

I am the default content of the slot, and this sentence will only appear when the parent component is not filled with anything.

Export default {

Name:'Child'

Props: ['title']

Data () {

Return {

Games: ['red alert', 'crossing the line of fire', 'Super Mary']

}

}

}

.child {

Width: 200px

Height: 200px

Background-color: lightblue

Margin: auto

}

In the parent component, there are three forms of rendering structure using the data passed through the slot by the child component:

I am the parent component

{{g}}

{{g}}

{{g}}

Import Child from ". / components/Child"

Export default {

Name: "app"

Components: {

Child

}

}

.parent {

Width: 400px

Height: 700px

Background-color: # bfa

}

Img {

Width: 200px

}

In the browser:

The first: is the basic usage, using scope = "youxi1", youxi1 is a custom variable to receive the data passed by the subcomponent, it is an object, using the interpolation syntax to print out the youxi1:

Type 2: replace scope with slot-scope

Third: use es6 to deconstruct the assignment method, directly deconstruct the object data into an array, and then traverse the v-for

The above small case is realized: using the same data, the parent component renders it into a different structure, which is very convenient and practical.

4. Version change

Since Vue 2.6.0, v-slot has been introduced. Slot and slot-scope for three types of slots mentioned above can be directly replaced with v-slot. In the vue2 version, we can still use slot and slot-scope, but only v-slot can be used in vue3. For details, see the explanation of the vue official documentation.

Thank you for your reading, the above is the content of "how to use Vue slot slot". After the study of this article, I believe you have a deeper understanding of how to use Vue slot slot, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.