Vue slots

1. What is a slot

A slot is a placeholder in a child component that is provided to the parent component. It means that the parent component can fill any template code in this placeholder, such as HTML, components, etc., and the filled content will replace the label of the child component . A simple understanding is that there is a "pit" left in the child component, and the parent component can use the specified content to fill the "pit".

Slot (slot) is the ability provided by vue to the wrapper of the component. Allows developers to define undefined parts that are expected to be specified by users as slots when packaging components.

Reference 1
Reference 2

2. Slot classification

• anonymous slot
• named slot
• Scoped slots

3. Basic use of slots

3.1 Anonymous slots

Anonymous: name defaults to default

3.1.1 Basic use

parent component

   <template>
     <div>
       <p>我是A组件</p>
     </div>
   </template>
    
   <script>
   export default {
      
      
     name:'A',
     data(){
      
      
       return {
      
      
    
       }
     }
   }
   </script>

Subassembly

   <template>
     <div>
       <p>我是B组件</p>
     </div>
   </template>
    
   <script>
   export default {
      
      
     name:'B',
     data(){
      
      
       return {
      
      
    
       }
     }
   }
   </script>

Use child components in parent components
If we want to directly in the child component labelThe content written in is invalid, such as: 123 , the specified content 123 will be discarded.

<template>
  <div>
    <p>我是A组件</p>
    <B><B/>
  </div>
</template>
 
<script>
import B from './B.vue'    //引入B组件
export default {
      
      
  name:'A',
  components:{
      
            //注册B组件
    B
  },
  data(){
      
      
    return {
      
      
 
    }
  }
}
</script>

Slots should be used in child components

<template>
  <div>
    <p>我是B组件</p>
    <!-- 插槽的使用方式 -->
    <slot></slot>     
  </div>
</template>
 
<script>
export default {
      
      
  name:'B',
  data(){
      
      
    return {
      
      
 
    }
  }
}
</script>

At this point, write the content in the subcomponent tag to take effect

<template>
  <div>
    <p>我是A组件</p>
   <!-- 用B组件标签包裹内容，验证slot -->
    <B>123</B>
  </div>
</template>
 
<script>
import B from './B.vue'
export default {
      
      
  name:'A',
  components:{
      
      
    B
  },
  data(){
      
      
    return {
      
      
    }
  }
}
</script>

In the above example, when the component is rendered, the subcomponent will be replaced with 123 (that is, the specified content). The
slot can contain any template code, including HTML; other components can also be placed.

3.1.2 Fallback (default) content

Sometimes it is useful to set specific fallback (ie default) content for a slot, which will only be rendered if no content is provided .

in component B

    <template>
      <div>
        <slot><p>我是B组件</p></slot>
      </div>
    </template>

When no content is specified in the parent component
"I am B component" will be rendered

when the content is specified in the parent component

    <B>
      <p>我是插槽内容</p>
    </B>

then the provided content will be rendered in place of the fallback content

3.2 Named slots

A named slot is a slot with a name.
Sometimes we need multiple slots, for example when we want to use some kind of generic template:

<!-- B.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

An outlet without a name will have the implicit name "default", an anonymous slot.

When providing content to a named slot , use the slot directive on a <template>element and provide its name as an argument to the slot (or directly in a tag, eg <div slot="header">):

<!-- A.vue -->
<template>
  <div>
    <p>我是A组件</p>
    <B>
      <template slot="header">
        <p>我是header部分</p>
      </template>
 
      <p>我是main（默认插槽）部分</p>
 
      <template slot="footer">
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>

Now all the content in <template> the element will be passed into the corresponding slot. Anything not wrapped in a slot <template>will be treated as the content of the default slot.
Page effect:

3.3 Scoped slots

3.3.1 Use

Let the slot content of the parent component have access to the props data subcomponent in the child component

<!-- B.vue -->
<template>
  <div>
    <p>我是B组件</p>
    <!-- 绑定在插槽元素上的attribute为插槽prop -->
    <slot :obj="obj">{
   
   {obj.firstName}}</slot>
  </div>
</template>
 
<script>
export default {
      
      
  name:'B',
  data(){
      
      
    return {
      
      
      obj:{
      
      
        firstName:'leo',
        lastName:'lion'
      }
    }
  }
}
</script>

parent component

    <template>
      <div>
        <p>我是A组件</p>
        <B>
			<template slot-scope="data">
			          {
   
   {data.obj.lastName}}
			 </template >
        </B>
      </div>
    </template>

Page effects:

In this example, we chose to name the object containing all slot props data, but you can use any name you like.

3.2 Deconstruction

destructuring assignment

3.3 el-table

the-table

row, column, $index 和 store（table 内部的状态管理）Data that can be obtained through scoped slots .
The data of the el-table is the record set (array) given to the table, and the scope is generated based on the data inside the table. It is depicted by Excel:

scope.row是每一行的数据，scope.$index是每一行的index，即序号
Editing and deleting operations of the el-table are generally operation lines, so they need to be passed to the callback For details on the function
, see the reference link

Practical application:
to be sorted out...