Vue 插槽讲解

什么是插槽？

Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）并且可以作为承载分发内容的出口。

简单的来说为了更加抽象的去复用组件而诞生的功能。

默认插槽

在组件中使用<slot></slot>来进行插槽定义，例如

<template>
    <h2>{{ title }}</h2>
    <slot></slot>

</template>

<script setup lang="ts">
    defineProps(['title'])

</script>

在其他组件调用时调用

<template>
    <SlotTwe :title="title1">
        <!-- 填入需要定制化的组件 -->
        <h2>你好</h2>
    </SlotTwe>
</template>

具名插槽

具名插槽本质上就是在默认插槽的基础上，进行相关命名，在使用时通过指定的命名去选择对应的插槽进行填充。

子组件中：

ps：通过name="xx" 来对插槽进行命名。事实上默认插槽的name是“default”

        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <slot name="s1"></slot>
            <slot name="s2"></slot>
          </div>
        </template>

父组件中：

ps：可使用 v-slot:xx 或 #xx 来指定对应的插槽进行插入

        <Category title="今日热门游戏">
          <template v-slot:s1>
            <ul>
              <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            </ul>
          </template>
          <template #s2>
            <a href="">更多</a>
          </template>
        </Category>

作用域插槽

简单的理解，就是数据由子组件自身决定，而数据的展现形式由组件的使用者来决定。

子组件中：

• 如下games的数据由组件本身提供，但是数据展现的形式由调用者来决定。
• 通过 “:Xxx”来传递数据给调用者

      <template>
        <div class="category">
          <h2>今日游戏榜单</h2>
          <slot :games="games" a="哈哈"></slot>
        </div>
      </template>

      <script setup lang="ts" name="Category">
        import {reactive} from 'vue'
        let games = reactive([
          {id:'asgdytsa01',name:'英雄联盟'},
          {id:'asgdytsa02',name:'王者荣耀'},
          {id:'asgdytsa03',name:'红色警戒'},
          {id:'asgdytsa04',name:'斗罗大陆'}
        ])
      </script>

父组件中：

• 组件通过v-slot获取对应数据对象

      <Game v-slot="params">
      <!-- <Game v-slot:default="params"> -->
      <!-- <Game #default="params"> -->
        <ul>
          <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
        </ul>
      </Game>

v-slot注意点

要注意命名的选择和数据的获取，如下例子

<!-- 选择了名称为S1的插槽，并获取S1插槽中传递过来的数据对象params -->
<Game v-slot:S1="params">