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

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

First, know slot Slot

Earlier, we will pass some data to the component through props for the component to display, but in order to make this component more versatile, we cannot limit the content in the component to fixed div, span, and so on. For example, in some cases, we use the component, we want the component to display a button, and in some cases, we use the component to display a picture. We should allow users to decide what content and elements are stored in a particular area. So with the existence of slots, we can improve the reusability of components, and also improve the flexibility of components.

Second, the basic use of slots

Use directly in it

Third, the default content of the slot

If you want to set the default content of the slot, you can add content directly inside the tag.

Fourth, the effect achieved by multiple slots

As shown in the figure above, if you set multiple tags between components, multiple tags will be added to each slot of the component.

As shown in the above code: use the name attribute to set the slot name in each component, and use the template tag in the middle of the component and set the v-slot: attribute name for one-to-one correspondence.

5. Dynamic slot

Sometimes our slot names are not fixed and need to be passed in from the outside, which requires the use of dynamic slots.

As shown in the figure above, we dynamically bind the property name in, which is passed in through props, and we bind the property externally through v-slot: [na].

VI. Abbreviation of named slot

As shown in the figure above, the v-slot:left of a named slot can be abbreviated to # left.

7. All the contents of the parent template of the rendering scope are compiled in the parent template. All the contents of the child template are compiled in the subset template.

As shown in the figure, there is a title in the parent component and a title in the child component, but the title property of the parent component is ultimately displayed.

VIII. The case of scope slot

Here, the array data is set in the data in the parent component and passed to the component through props. After the child component gets the array, it iterates through every item in the array through for, and binds the data to the slot tag through v-bind, and then the parent component can pass the data variable to "data" through vMuzlotfor.

IX. Exclusive default slot abbreviation

The above is a complete description of the scope slot

You can rewrite it as follows:

It can also be rewritten as:

Default slot and named mix

The scope slot case can be rewritten as:

The above is all the content of the article "what does the slot in vue mean?" 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.