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

This article mainly shows you "what is the use of slots in vue". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what is the use of slots in vue?"

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

Classification of slots

Default slot

Named slot

Scope slot

When we only need to insert a html tag in our component, we can just use the default slot.

If there are more than one, we have to give the first slot a name to decide which slot to insert.

When we want to use the data in the component in our slot, we may use the scope slot

The use of the default slot is shown below.

When in use

The above is the use of the default slot

Named slot, that is, we specify more than one slot in the component. In order to figure out which one acts on it, we give the slot a name to distinguish it.

When in use

Here, vue 2.6 has a new slot to write, in which to use the template tag, we know that template is just a package tag, it will not be rendered to the real page, the new slot is written using it, not without it, as shown below

Let's talk about scope slots.

Let's take a look. The data displayed in the above two slots are placed in the data of the user's About component in the slot.

But sometimes, the consumer doesn't care about the data and gets it from the catetory component.

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

This is the time to use the scope slot.

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

How does the user receive and use it?

The above is all the content of the article "what is the use of slots in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.