Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis. The reuse of templates provides us with slots.

Slot Classification

Default Slots

Named Slots

Scoped Slots

When we only need to insert an HTML tag in our component, we can use the default slot.

If there are multiple, we need to give the first slot a name to decide which slot to insert it into.

When we want to use data from a component in our slot, we may use a scoped slot.

The following shows the usage of the default slot

When using

The above is the use of the default slot

Named slots, that is, we define one or more slots in a component, and in order to distinguish which one is acting on it, give the slot a name to distinguish

When using

Here I would like to say that Vue 2.6 version has a new way of writing slots, which uses the template tag. We know that template is just a wrapping tag, it will not be rendered on the real page. The new way of writing slots uses it. It is not enough without it, as shown below

Let's talk about scoped slots.

Let's take a look at the data displayed by the two slots above. They are all placed in the data of the About component, the user of the slot.

But sometimes, users don't care about these data, and the data is obtained from the category component itself.

The user About only needs to manage the presentation of the content in the slot.

This is where scoped slots come in handy

In the above figure, you can see that two data are passed to the user in the scope slot

How did the user receive it?

The above are the three types of slots used in Vue

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!