Introduction: Slots and components
Repeated functional modules in the usual development are often processed in the form of package components. Whether a package of a component is mature focuses on the reuse of this component, otherwise the package of this component is meaningless. Slots can actually improve the reusability of a component to a certain extent. A slot is a component’s HTML template that the parent component decides whether or not to display and how to display it. In fact, the two core issues of a slot are highlighted here: whether to display and how to display. A component can be understood as a non-slot component and a slot component. The non-slot component consists of a regular control label, and the DOM’s explicit and implicit control is controlled by the slot component itself: The child component is essentially an empty shell, but it determines where and how to insert content, while the parent component determines what is in the slot.
Such as:
Render as follows:
The example above is Vue officialA single slot, also called default slot (anonymous slot), because it does not require you to set the slot name property. The default is slot: default.Only one default slot is allowed per component
The opposite of that isA named slotA named slot can be associated with a slot of a child component only after the slot name attribute is set in the parent component. Multiple named slots are allowed in a component
Such as:
Scope slot (parameter slot)
In the above type of slot (non-parametric slot), the parent component determines whether the slot is empty and determines the contents of the slot. The parent component provides both style and Content. Scoped slots (parameter slots) require only one set of styles from the parent component.