How to use the Vue3 slot
This article mainly shows you "how to use Vue3 slots". 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 "how to use Vue3 slots".
1. Introduction of v-slot
V-slot can only be used on template or components, otherwise an error will be reported.
V-slot is also one of the instructions.
Examples of use:
/ / parent component code slot content / / the syntax of the component template v-slot, simplifies the function of slot and slot-scope scope slots, and is more powerful and more efficient. II. Anonymous slot
When there is only one slot in the component, the name property of slot can not be set, and there can be no parameters after v-slot, but v-slot will also have an implicit "default" in the slot where the name attribute is not set.
Anonymous slots use:
/ / component invokes slot content / / component template
Although v-slot does not set parameters, it cannot be deleted, otherwise the slot content will not render properly.
III. Named slots
When there are multiple slots in a component, if the v-slot attribute value is not set, the element will be inserted into the slot component without setting the name attribute value by default. In order to place the corresponding element in the specified location, you need to use the v-slot and name attributes to correspond the content.
Use of named slots:
/ / parent component high-quality content foot / / child component
Named slot abbreviation:
V-slot, like v-bind and v-on instructions, also has abbreviations. V-slot: can be abbreviated to #.
As mentioned above, v-slot:footer can be abbreviated to # footer.
The above parent component code can be simplified to:
High-quality content foot
Note: as with other instructions, it can be abbreviated only if there are parameters, otherwise it is invalid.
IV. Scope slot
Sometimes it is useful to give the slot content access to data that is unique to the subcomponents. This is a common situation when a component is used to render an array of projects, and we want to be able to customize how each project is rendered.
To make the property on the subcomponent available on the slot contents, you need to bind an attribute to the slot. The props name of the providing slot is then received and defined at v-slot.
Examples of use:
/ / slot content-- {{slotProps.item}} sequence number-- {{slotProps.index}} / / Sub-component code const arr = ['1111', '2222', '3333'] V, dynamic slot name
The v-slot instruction parameter can also be dynamic and is used to define the dynamic slot name.
Such as:
Dynamic slot name const dd = () = > {return 'hre'}
Functions are used here, or variables can be used directly.
The above is all the contents of the article "how to use Vue3 slots". 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!
