Vue3 slot usage summary

1. Introduction to v-slot

v-slot can only be used in template or components, otherwise an error will be reported.

v-slot is also one of the instructions.

Example of use:

//Parent component code <child-com> 
 <template v-slot:nameSlot> 
  Slot content</template> 
</child-com> 
 
//Component template <slot name="nameSlot"></slot> 
The syntax of v-slot simplifies the functions of slot and slot-scope scope slots, making them more powerful and more efficient.

2. Anonymous Slots

When there is only one slot in a component, slot name attribute can be left unset, and v-slot can be used without parameters. However, v-slot will also have an implicit "default" in the slot where the name attribute is not set.

Anonymous slot usage:

//Component call <child-com> 
 <template v-slot> 
  Slot content</template> 
</child-com> 
 
//Component template <slot ></slot> 

Although v-slot has no parameters set, it cannot be deleted, otherwise the slot content cannot be rendered normally.

3. Named Slots

When there are multiple slots in a component, if the v-slot attribute value is not set, the element will be inserted into the slot component without a name attribute value by default. In order to put the corresponding element in the specified position, you need to use v-slot and name attributes to match the content.

Named slots use:

//Parent component <child-com> 
 <template v-slot:header> 
  Header</template> 
 <template v-slot:body> 
  Contents</template> 
 <template v-slot:footer> 
  feet 
</child-com> 
     
//Subcomponent <div> 
 <slot name="header"></slot> 
 <slot name="body"></slot> 
 <slot name="footer"></slot> 
</div> 

Named slot abbreviations:

v-slot like v-bind and v-on directives, also has abbreviations. v-slot: can be abbreviated to #.

As mentioned above, v-slot:footer can be shortened to #footer.

The above parent component code can be simplified to:

<child-com> 
 <template #header> 
  Header</template> 
 <template #body> 
  Contents</template> 
 <template #footer> 
  feet 
</child-com> 

Note: Like other commands, abbreviations are only allowed when there are parameters, otherwise they are invalid.

4. Scoped Slots

Sometimes it is useful to give slot content access to data that is only available in child components. It's a common case when a component is used to render an array of items, and we want to be able to customize how each item is rendered.

To make properties on the child component available on the slot content, you need to bind a property to slot . Then receive and define the slot props name at v-slot.

Example of use:

// 
<child-com> 
 <template v-slot:header="slotProps"> 
  Slot content --{{ slotProps.item }} Serial number --{{ slotProps.index }} 
 </template> 
</child-com> 
     
//Subcomponent code <template> 
 <div v-for="(item, index) in arr" :key="index"> 
  <slot :item="item" name="header" :index="index"></slot> 
 </div> 
</template> 
<script setup> 
 const arr = ['1111', '2222', '3333'] 
</script> 

5. Dynamic slot names

v-slot directive parameter can also be dynamic, to define dynamic slot names.

like:

<child-com> 
 <template v-slot:[dd()]> 
  Dynamic slot name</template> 
</child-com> 
 
<script setup> 
const dd = () => { 
  return 'hre' 
} 

Functions are used here, but variables can also be used directly.

This is the end of this article about the summary of Vue3 slot usage. For more relevant Vue3 slot usage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!