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

This article is to share with you about the use of vue scope slots. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Scope slot

Making good use of scope slots can do some interesting things, such as defining a basic layout component A, which is only responsible for layout, regardless of data logic, and then defining another component B to be responsible for data processing. Layout component A goes to B to pick it up when it needs data. Suppose that one day our layout changes, we only need to modify component A, not component B, so that we can fully reuse the data processing logic of component B. I have written an actual case about this piece before. you can click here to see.

One of the most important points involved here is that the parent component is going to get the data in the child component, which used to make use of slot-scope, which has provided a better API alternative to support slot and slot-scope features since vue 2.6.0.

For example, let's order a component called current-user:

{{user.lastName}}

The parent component references the component of current-user, but wants to replace the last name with the first name (the first word of the foreigner's name is the first name, and the last word is the last name):

{{user.firstName}}

This approach will not work, because the user object is the data of the child component, and we can't get it in the parent component, so we can use the v-slot

To make it happen.

First, in the subcomponent, bind user as a feature of an element:

{{user.lastName}}

After that, we can give v-slot a value to define the name of the slot prop we provide when the parent component references:

{{slotProps.user.firstName}}

There is also an acronym syntax in this way. You can check the abbreviation syntax of the exclusive default slot. In the end, we quote it as follows:

{{slotProps.user.firstName}}

The slot-scope code is clearer and easier to understand than before.

Thank you for reading! This is the end of this article on "what is the use of vue scope slots?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.