vue3中具名插槽

父

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        
         <template v-slot:g1>
          <ul>
            <li v-for="(item,index) in games" :key="index">
              {{ item.name }}
            </li>
          </ul>
         </template>
      
      </Game>
      <Game >
        
        <template v-slot:g2>
          <ol>
          <li v-for="(item,index) in games" :key="index">
            {{ item.name }}
          </li>
        </ol>
        </template>
    
    </Game>
    </div>
  </div>
</template>

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

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
</style>

子

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <slot name="g1"></slot>
    <slot name="g2"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
  import {reactive} from 'vue'
</script>

<style scoped>
  .game {
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  h2 {
    background-color: orange;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>

关键

父组件中在子组件的标签里面 使用v-slot:g1这样区分

<template v-slot:g1>
          <ul>
            <li v-for="(item,index) in games" :key="index">
              {{ item.name }}
            </li>
          </ul>
         </template>

子组件中使用 <slot name='g1'></slot>这样区分

    <slot name="g1"></slot>
    <slot name="g2"></slot>