1. What is a slot?
The slot is equivalent to providing a placeholder in the child component for the parent component to use, which means <slot></slot>that the parent component can fill the placeholder with template code components, etc., and fill it in the child component. The slot is used to decide to insert the carried content into a specified position, so that the template is divided into blocks, with modular characteristics and greater reusability. Whether the slot is displayed or not and how to display it is controlled by the parent component, while where the slot is displayed is controlled by the child component.
2. How to use the slot (default slot):
Define the placeholder in the child component:
In the parent component, the content that can define slots inside the component can be html code or other components; in the child component, you can define multiple default slots, and determine the position of these default slots in the child component, the parent The content to be inserted by the component will be filled into these default slots:
3. How to use slots (named slots):
When defining a slot in a subcomponent, give the corresponding slot a corresponding name <slot name="slotName1"></slot>, and the subcomponent can define multiple named slots with the same name:
in the parent component, the content in the slot can be filled according to the declared name.
4. How to use slots (scoped slots):
Acting on the slot is to realize that the child component itself can control what content it wants to display.
In the parent component, it can be v-slotused to obtain the content that the child component wants to display.
