Vue3中slot插槽的几种使用实践

【1】默认插槽

父组件

<Category title="今日美食城市">
  <img :src="imgUrl" alt="">
</Category>

子组件

<div class="category">
  <h2>{{title}}</h2>
  <slot>默认内容</slot>
</div>

父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。

【2】具名插槽

也就是插槽会按照名字进行内容的替换。

父组件

// v-slot:s2 表示插槽名字为s2 ，简写方式为 #s2
<Category>
  <template v-slot:s2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
  </template>
  <template v-slot:s1>
    <h2>热门游戏列表</h2>
  </template>
</Category>

子组件

<template>
  <div class="category">
    <slot name="s1">默认内容1</slot>
    <slot name="s2">默认内容2</slot>
  </div>
</template>

【3】作用域插槽

理解： 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

子组件

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <slot :youxi="games" x="哈哈" y="你好"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
  import {reactive} from 'vue'
  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
</script>

父组件，params会拿到子组件的数据的数据{"youxi":[],"x":"哈哈","y":"你好"}

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <template v-slot="params">
          <ul>
            <li v-for="y in params.youxi" :key="y.id">
              {{ y.name }}
            </li>
          </ul>
        </template>
      </Game>

      <Game>
        <template v-slot="params">
          <ol>
            <li v-for="item in params.youxi" :key="item.id">
              {{ item.name }}
            </li>
          </ol>
        </template>
      </Game>

// 这里直接解构youxi ，写法更简洁   <template v-slot="{youxi}">
//#default 其实就是 v-slot:default ，也就是插槽默认名字为default
      <Game>
        <template #default="{youxi}">
          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game>

    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Game from './Game.vue'
</script>

另外，作用域插槽也是可以有名字的，如下所示 v-slot:s1="params" ,s1表示插槽名字，params表示数据。

<Game>
  <template v-slot:s1="params">
    <ol>
      <li v-for="item in params.youxi" :key="item.id">
        {{ item.name }}
      </li>
    </ol>
  </template>
</Game>