current position:Home>Component slot Vue js

Component slot Vue js

2022-04-29 09:30:46Famous teacher dianjin

Component slot can set component content conveniently .

Component slots
• Single slot
• A named slot
• Scope slot
Single slot
• If we want component tags to look like HTML Set the content just like a label , So group
It will be very flexible to use .

But usually the components we write about , The content written in the tag of the component will be discarded . 

  We need to pass <slot> Make slot settings .

You need to pay attention to the rendering position of the template content : 



We can do it in <slot> Set default values for slots in , Also known as backup content . 


A named slot
• If there are multiple locations in the component that need to set slots , Give as needed <slot> Set up
name, Called named slots .




Scope slot

The component slot is used to enable the slot to use the data of sub components .
• The component will need to be used by the data slot through v-bind Bind to <slot>, such
The attribute used to pass data to a slot is called a slot prop

After the component binds the data , The slot needs to pass through v-slot receive data


  If only the default slot exists , At the same time, it needs to receive data , Can be abbreviated :


  You can also use ES6 Deconstruction operation for data reception


copyright notice
author[Famous teacher dianjin],Please bring the original link to reprint, thank you.

Random recommended