Slot in Vue uses slots to distribute content, vueslot

Slot in Vue uses slots to distribute content, vueslot

The subject of this article from: https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5% AE %B9

<Slot> </slot> label is a placeholder. It helps you take a good place. When you need it, you can directly import html and it will display it for you.

It is also said that props can pass data from the parent component to the child component, and slot can pass html from the parent component to the child component. So how to implement it?

Single slot:

<! DOCTYPE html> 
The slot tag is written into the template of the component, and html is passed in when the child component is called at the parent level.
Named slot:
<! DOCTYPE html> 
Named slot, as the name implies, when there are multiple slot tags, you need to give them their own names. when calling the parent component, you need slot = "internal name ", when there is no named slot tag, the default html code imported by the parent component will be all output in the unknown slot tag.
Scope slot
<! DOCTYPE html> 
A range slot is a special type of slot. It is used as a reusable template that can pass data to replace rendered elements.

In fact, it is equivalent to obtaining the props object passed by the Child component in the parent component and rendering it to the parent component.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.