slot concept
- Slot (slot) is a concept proposed by vue. Just like the name, the slot is used to decide to insert the content it carries into a specified position, so that the template can be divided into blocks, with modular characteristics and larger of reusability.
- Whether the slot is displayed or not, how to display it is controlled by the parent component, and where the slot is displayed is controlled by the child component.
- The parent component has the structure, and the child component uses the slot to occupy the place.
- Scope slot is a way of passing parameters from child to parent, which solves the problem that ordinary slots cannot access child data in parent.
slot use
default slot
Parent component (radio.vue):
Write the content you want to display in the child component referenced by the parent component (labels can be used or not)
Child component (radioChild.vue):
Write the slot in the child component, where the slot is located The position is the content to be displayed by the parent component.
The page is displayed as follows:
named slot
Child component:
Three slot tags are defined in the child component, two of which are added with the name attribute header and footer respectively. Parent
component:
use the template in the parent component and write the corresponding slot value to specify the content in the child component The location shown in (of course, you don’t have to write the template), and other content that has no corresponding value will be placed in the slot where the name attribute is not added in the subcomponent. The page is displayed as follows
:
The default content of the slot
Parent component:
Child component:
You can write content in the slot tag of the child component. When the parent component does not write content, it will display the default content of the child component. When the parent component writes content, it will replace the default content of the child component.
The page is displayed as follows:
compile scope
Parent component:
Child component:
The page is displayed as follows:
Scoped slots
Scope slot is a way of passing parameters from child to parent, which solves the problem that ordinary slots cannot access child data in parent. Child component
:
bind the required value on the slot label of the child component.
Parent component:
in the parent component Use the slot-scope attribute on the above, user.data is the value passed from the sub-component.
The page is displayed as follows:
