The slot concept of VUE, V-solt, is used when a declared child component needs to leave a space in place for the parent calling the child to extend its maintenance. V-solt is divided into three types: 1. Anonymous slots (also known as default slots), which do not need to be named and can only be declared one for each child component

eg.

/ / the parent component
<component> 
    <template v-slot:default>Any content</template>
</component> 

// Child component
<slot>The default value</slot>
Copy the code

The default content is filled into the anonymous slot. The module declared by v-slot:default can be omitted, and any unspecified name in the default child tag is filled into the anonymous component. 2. The difference between a named slot and an anonymous slot is that the name attribute needs to be defined when a child component is declared, and the name attribute of the child component corresponding to the slot needs to be specified when the parent component calls the slot

eg.

/ / the parent component
<component> 
    <template v-slot:cos>// Specify that the contents of the package are any contents to be filled into the slot whose child component name is cos</template>
</component> 

/ / child component
<slot name="cos">The default value</slot> // The name attribute needs to be defined
Copy the code

3. Scope slot, which can retrieve data defined in child components from parent components

eg.

/ / child component
<slot name="cos" :data="content">
    {{ content.data}}
 </slot> 
data() {
    return {
      content: {data:"Test data". }}},... }Copy the code
/ / the parent component
<component>
 <template v-slot:cos="dataFromChild" >/ / dataFromChild custom to receive the child components data object {{dataFromChild. Content. data}}</template> 
</component> 
Copy the code

This allows you to retrieve the child’s data from the parent.