1. Slot content
The parent component can insert html string components in the middle of the sub component elements of html. These components will be inserted into the position occupied by < slot > < / slot > of the sub component. If the sub component does not have < slot > < / slot >, the inserted content will be discarded
<slot-child> <h3>Slot content</h3> </slot-child>
<div>slot-child</div> <slot></slot>
Render results:
2. Render scope
All contents in the parent template are compiled in the parent scope; Everything in the sub template is compiled in the sub scope
The same instance property (i.e. the same scope) as the rest of the template can be accessed in the slot, but the real column property of the sub component cannot be accessed
3. Spare content
Subcomponents can add alternate content to the slot tag. When the parent component template provides slot content, the provided slot content is rendered. If not, the alternate content between the slot tags is rendered
<slot> <h3>Alternate content</h3> </slot>
4. Named slot
Sometimes we need multiple slots. In this case, the < slot > element has a special attribute: name. This attribute can be used to define additional slots
Template V-slot: the content contained in name will replace the position of the slot with the same name
A < slot > exit without a name will have an implied name "default", that is, without template, it is equivalent to V-slot: default, and without slot name=XX, it is also equivalent to slot name="default"
<template> <slot-child> <template v-slot:default> <span>defalut{{ msg }}</span> </template> <template v-slot:one> <span>one{{ msg }}</span> </template> <template v-slot:two> <span>two{{ msg }}</span> </template> </slot-child> </template>
<template> <div> <span>1</span> <slot name="one"> </slot> </div> <div> <span>2</span> <slot name="two"> </slot> </div> <div> <span>3</span> <slot name="default"> </slot> </div> </template>
5. Scope slot
By binding the attribute in the slot, the parent component can access the data of these child components. When there are multiple slots, pay attention to the consistency of name s
<template v-slot:one="slotProps"> <span>one{{ msg }}</span> <h3>{{ slotProps.item }}{{ slotProps.str }}</h3> </template>
<slot name="one" :item="item" :str="str"> </slot>
Abbreviation syntax for exclusive default slots
When there is only one slot, the above is the abbreviation of the following: default can be omitted
However, as long as multiple slots appear, always use the complete < template > based syntax for all slots
<slot-child v-slot:default="slotProps"> <h3>{{ slotProps.item }}{{ slotProps.str }}</h3> </slot-child>
<slot-child> <template v-slot:default="slotProps"> <h3>{{ slotProps.item }}{{ slotProps.str }}</h3> </template> </slot-child>
6. Deconstruct the slot
The internal working principle of the scope slot is to include the contents of your slot in a function passing in a single parameter
function (slotProps) {
// ... Slot contents
}
This means that both the function and the deconstruction of the input parameters can be done
Deconstruction {str} = slotProps
Deconstruction rename {str: str2} = slotProps
Deconstruct the definition of alternative content {STR = 'alternative content'} = slotProps. Note that when the str attribute is undefined (explicitly declare str:undefined or the < slot > tag does not have: str=XX), STR is null or empty string, and 'alternative content' will not be used
<template v-slot:two="{ str = 'spare str' }"> <span>two{{ msg }}</span> <h3>{{ str }}</h3> </template>
<slot name="two"> </slot>
7. Dynamic slot name
The following is equivalent to < template V-slot: one = "slotprops" >
<template v-slot:[oneName]="slotProps">
data() { return { oneName: "one", }; },
8. Abbreviation of named slot
Like v-on and v-bind, v-slot also has abbreviations, that is, replace all the contents before the parameter (v-slot:) with characters #.
For example, v-slot:header can be rewritten as #header:
However, like other instructions, the abbreviation is only available when it has parameters, such as # = "{item}" is invalid
Must always be replaced by an explicit slot name, # default="{ item }"
Dynamic slot names can also be abbreviated:
<template #[oneName]="slotProps">