Vue3组件插槽

Vue3和Vue2插槽几乎没有区别

所谓插槽，在我理解就是在子组件里挖个坑，把父组件内容填入坑里。再直接一点就是把子组件标签中的内容填入到子组件内部的标签中

组件插槽非常简单，共分为四种

1. 匿名插槽(默认插槽)
2. 具名插槽
3. 作用域插槽
4. 动态插槽

写法

一、匿名插槽

注意：
在匿名插槽中，v-slot 可写为 v-slot:default 可简写 #default 匿名插槽最多只能有一个。
父组件

<child>
      <template v-slot>            //   匿名插槽   插入子组件 匿名位置 (匿名位置有且只有一个)
        <span>我是插槽值</span>
      </template>
</child>

子组件

 //  child组件
<div>
	<span>我是子组件</span>
	<slot></slot>     // 此处插入父组件中template的内容
</div>

二、具名插槽

在父组件 v-slot: 插入的名称 在子组件中 指定slot坑的名称 父组件与子组件名称相同就会插入到对应位置啦。

父组件

<child>
      <template v-slot:header>        // 具名插槽   插入子组件指定name 处
        <span>我是插槽值--插入头部</span>
      </template>
</child>

子组件

 //  child组件
    <div class="header">
      <span>头部</span>
      <slot name="header"></slot>
    </div>

三、作用域插槽

子组件将值传入slot 父组件就能拿到子组件值 注意写法是 v-slot:具名=“scope” scope是子组件所有数据的集合，一般可将子组件传入的值解构 v-slot:具名=“{ 子组件传入的值 }” 结合elementui 的表格理解一下
父组件

<child>
      <template v-slot:footer="{ row }">    // 作用域插槽  v-slot:footer="{row}"   可将v-slot 简写为#   #footer="{row}"  row为子组件传入父组件的值
        <span>我是插槽值--插入尾部{{ row.name }}----{{ row.age }}</span>
      </template>
</child>

子组件

 //  child组件
<div class="footer">
      <div v-for="(item, index) in tableData">
        <slot name="footer" :row="item"></slot>
      </div>
</div>

四、动态插槽

将插入的名称作为变量，修改变量值可实现动态插槽

      <template #[name]>        // 动态插槽
        <h2>我是动态插槽</h2>
      </template>
      
    <script setup lang='ts'>
    
    let name = ref('default')     // 插入默认位置
    let name = ref('header')     // 插入 name 为 header 的插槽
    
    </script>