What does a slot mean? Basic usage experience of slot

what is a slot

Slot is a capability provided by Vue for component packagers. Allows developers to define undefined parts that are expected to be specified by the user as slots when encapsulating components.

<template>
  <p>这是MyCom1组件的第1个p标签</p>
  <！--通过slot标签，为用户预留内容占位符（插槽）-->
  <slot></slot>
  <p>这是MyCom1组件最后一个p标签</p>
</template>

<my-com-1>
  <！-在使用 MyCom1 组件时，为插槽指定具体的内容-->
  <p>~~~用户自定义的内容~~~</p>
</my-com-1>

If no slots are reserved when packaging a component, any customization provided by the user will be discarded. The sample code is as follows:

<template>
  <p>这是MyCom1组件的第1个p标签</p>
  <！--封装组件时吗，没有预留任何插槽-->
  <p>这是MyCom1组件最后一个p标签</p>
</templa>

<my-com-1>
  <！--自定义的内容会被丢弃-->
  <p>~…-用户自定义的内容~~~</p>
</my-com-1>

When packaging a component, you can provide fallback content (default content) for reserved slots. If the consumer of the component does not provide any content for the slot, the fallback content takes effect. The sample code is as follows:

<template>
  <p>这是MyCom1组件的第1个p标签</p>
  <slot>这是后备内容</slot>
  <p>这是MyCom1组件最后一个p标签</p>
</template>

named slot

If you need to reserve multiple slot nodes when encapsulating a component, you need to specify a specific name for each slot. Such slots with specific names are called "named slots". The sample code is as follows:

<div class="container">
  <header>
    <！--我们希望把页头放这里-->
    <slot name="header"></slot>
  </header>
  <main>
    <！--我们希望把主要内容放这里-->
    <slot></slot>
  </main>
  <footer>
    <！--我们希望把页脚放这里-->
    <slot name="footer"></slot>
  </footer>
</div>

Note: Slots without a specified name will have an implicit name called "default".

When providing content to a named slot, we can use the v-slot directive on an element and provide its name as a parameter to v-slot. The sample code is as follows:

<my-com-2>
  <template v-slot:header>   
<h1>滕王阁序</h1>
  </template>
  
<template v-slot:default>
    <p>豫章故郡，洪都新府。</p>
    <p>星分翼，地按街庐。</p>
    <p>襟三江而带五潮，控蛮荆而引瓯越。</p>
  </template>
  
<template v-slot:footer>
    <p>落款：王勃</p>
  </template>
</my-com-2>

scope slot

In the process of encapsulating components, props data can be bound to reserved slots. This kind of props data is called "scope slot". The sample code is as follows:

<tbody>
  <!下面的slot是一个作用域插槽-->
  <slot v-for="item in list":user="item"></slot>
</tbody>

You can use the form of v-slot: to receive the data provided by the scope slot. The sample code is as follows:

<my-com-3>
 <！--1.接收作用域插槽对外提供的数据-->
 <template v-slot:default="scope">
    <tr>     
      <！--2.使用作用域插槽的数据-->    
      <td>{
    
    {
    
    scope}}</td>   
    </tr>
 </template>
</my-com-3>

Deconstructing Slot Prop

For data objects provided externally by scope slots, destructuring assignment can be used to simplify the data receiving process. The sample code is as follows:

<my-com-3>
  <！--v-slot：可以简写成#-->
  <！--作用域插槽对外提供的数据对象，可以通过“解构赋值”简化接收的过程-->
  <template #default="{user}">
    <tr>
      <td>{
    
    {
    
    user.id}}</td>
      <td>{
    
    {
    
    user.name}}</td>
      <td>{
    
    {
    
    user.state}}</td>
    </tr>
  </template>
</my-com-3>