Slot, simple understanding is a piece of code that can plug and play. Slots in VUE can be roughly classified into the following three types:

  • The default slot
  • A named slot
  • The default slot

1. Default slot

Written inside child component (child.vue) :

<template>
	<! -- Other code inside the component -->
	<slot></slot> 
    	<! -- Other code inside the component -->
</template>
Copy the code

Written inside parent component (parent.vue)

<Child>
  <template>
  	<span>The contents to be displayed in the slot</span>
  </template>
</Child>
Copy the code

The final rendered result:

<! -- Other code inside the component -->
<span>The contents to be displayed in the slot</span>
<! -- Other code inside the component -->
Copy the code

So, to put it simply, the default slot is a slot in the child component that will display whatever content is written when the child component is called in the parent.

2, named slot

Written inside child component (child.vue) :

<template> 
    <! -- Other code inside the component -->
    <slot name="slot1"></slot>
    <slot></slot> 
    <slot name="slot2"></slot>
    <! -- Other code inside the component -->
</template>
Copy the code

Parent component (parent.vue):

<Child>
  <template v-slot="slot1">
  	<span>Contents displayed in slot1</span>
  </template>
  <! You can also use the form # slot name
  <template #slot2>
  	<span>Contents displayed in slot2</span>
  </template>
  <template>
  	<span>The content to be displayed in the default slot</span>
  </template>
</Child>
Copy the code

The final rendered result:

<! -- Other code inside the component -->
<span>Contents displayed in slot1</span>
<span>The contents to be displayed in the slot</span>
<span>The content to be displayed in the default slot</span>
<! -- Other code inside the component -->
Copy the code

A named slot is defined in a child component with a name, and when called by the parent component, the content is distributed to the specified location through the v-slot=” slot name” instruction, which is then rendered on the page. Note that the final rendered content is the slot location defined by the child component, regardless of the slot order passed in when the parent component is called.

3. Scope slot

Sometimes we need a scope slot when we want to access data within a child component within a slot.

Written inside child component (child.vue) :

<template> 
    <! -- Other code inside the component -->
    <slot name="slot1" propsName="I'm sloT1 data in a child component."></slot>
    <slot name="slot2" :propsName="{a:1,b:2}"></slot>
    <! -- Other code inside the component -->
</template>
Copy the code

Parent component (parent.vue):

<Child>
  <template #slot1="data">
  	<span>{{data.propsName}}</span>
  </template>
  <template #slot2="data">
  	<span>{{data.propsName.a}} ---- {{data.propsName.b}}</span>
  </template>
</Child>
Copy the code

The final rendered result:

<! -- Other code inside the component -->
<span>I am the data for SLOT1 in the child component</span>
<span>1-2</span>
<! -- Other code inside the component -->
Copy the code

PropName =”data” is used to pass data in child components, accept data in parent components as # slot name =” defined object name “, and use data in slots as {{defined object name. PropName}}. It can also be written deconstructed:

Written inside child component (child.vue) :

<template> 
    <! -- Other code inside the component -->
    <slot name="slot1" prop1="I'm prop1 content." prop2="I'm prop2 content."></slot>
    <! -- Other code inside the component -->
</template>
Copy the code

Parent component (parent.vue):

<Child>
  <template #slot1="{prop1, prop2}">
  	<span>{{prop1}}-----{{prop2}}</span>
  </template>
</Child>
Copy the code

The final rendered result:

<span>I'm prop1 content ----- I'm prop2 content</span>
Copy the code

conclusion

Although slot is seldom used in simple components in daily packaging, it is an essential function in packaging advanced components. Slot can greatly improve the reusability of components. For example, when A component is invoked on page A and page B, only the group part is slightly different, or the content of this part is displayed differently on each page, it can be encapsulated in the form of slots.

Of course, the author of this share is just to throw a brick to attract jade, welcome you to share correction.