最新版vue3+TypeScript开发入门到实战教程之插槽slot详解

插槽概述

Slot，可翻译中文为插槽、空槽、钥匙槽。以下为官方定义Solt（插槽）是 Vue 提供的一种内容分发机制，允许父组件向子组件指定位置注入内容。简单理解为大门样式已经设计好，钥匙空槽预留，使用大门的人可以按装指纹锁、物理锁等锁。 Slot插槽分三种类型

• 默认插槽
• 具名插槽
• 作用于插槽

默认插槽

概述

默认插槽是具名插槽的一个特例，实际类型应分成两类：

• 具名插槽
• 作用于插槽

默认插槽实例

• 创建Fish，Fish组件提供标题、尾部，中间插槽内容由使用者提供
• 创建App组件，引用Fish组件

App组件代码

<template>
  <div class="app">
    <Fish>
      <div>游泳的鲫鱼</div>
    </Fish>
     <Fish>
      <template>
        <div>会飞的鱼</div>
      </template>
    </Fish>
    <Fish>
      <template v-slot:default>
        <div>跃龙门的鲤鱼</div>
      </template>
    </Fish>
  </div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>

Fish组件代码

<template>
  <div class="fish">
    <h2>头部</h2>
    <slot></slot>
    <h2>底部</h2>
  </div>

</template>

运行效果： 注意中间位置，会飞的鱼没有显示出来，默认插槽不需要使用template标签，若使用，必须给标签设置默认名称。

具名插槽

概述

在Fish组件中，可能会有很多个插槽， 如顶部、中部都可以设置一个插槽。使用名称来区分插槽：

• 给slot设置名称
• template标签设置slot名称

具名插槽实例

Fish组件代码

<template>
  <div class="fish">
    <h2>{{title}}</h2>
    <slot name="content">默认数据</slot>
    <slot name="footer">
      <h2>底部</h2>
    </slot>
  </div>
</template>
<script setup lang="ts">
defineProps(['title']);
</script>

App组件代码

<template>
  <div class="app">
     <Fish title="飞鱼">
      <template v-slot:content>
        <div>会飞的鱼</div>
      </template>
    </Fish>
      <Fish title="飞鱼">
      <template v-slot:footer>
        <h2>鲤鱼跃龙门</h2>
      </template>
      <template v-slot:content>
        <div>会飞的鱼</div>
      </template>
    </Fish>
     <Fish title="草鱼">
      <template #content>
        <div>吃草的鱼</div>
      </template>
      <template v-slot:footer>
        <h2>很爱水草</h2>
      </template>
      </Fish>
  </div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>

运行效果

• 引用第一个Fish组件时，当不使用名称为footer的插槽时，它显示默认值
• 引用第二个组件说明，template显示位置取决于所选Slot
• 引用第三个组件说明，v-slot:可用#缩写，如v-slot:content缩写成#content

作用域插槽

概述

插槽实际分两类，一是具名插槽，一是作用域插槽，两者区别:

• 具名插槽数据与显示都在使用者
• 作用域插槽的数据是在被引用的组件当中，使用者只负责显示数据
• 通过slot标签可以将数据传递给template

作用域插槽实例

Fish组件代码

<template>
  <div class="fish">
    <h2>{{title}}</h2>
    <slot name="content" :data="fishs">默认数据</slot>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

defineProps(['title']);
let fishs = reactive([
  { name: '鲫鱼', price: 10 },
  { name: '草鱼', price: 33 },
  { name: '娃娃鱼', price: 88 },
])
</script>

App组件代码

<template>
  <div class="app">
     <Fish title="飞鱼">
      <template v-slot:content="params">
        <ul>
          <li v-for="item in params.data">
            鱼：{{ item.name }}--价格:{{ item.price }}
          </li>
        </ul>
      </template>
    </Fish>
    <Fish title="草鱼">
      <template #content="{data}">
          <h4 v-for="item in data">
            鱼：{{ item.name }}--价格:{{ item.price }}
          </h4>
      </template>
    </Fish>
  </div>
</template>
<script setup lang="ts">
import Fish from './view/Fish.vue';
</script>

运行代码查看效果 核心代码：

• 传递数据：slot传递数据<slot name="content" :data="fishs">默认数据</slot>，
• 传递数据：template 接收数据<template v-slot:content="params">。 注意param结构赋值data

总结