Vue3 作用域插槽

UI组件库用的多

一、场景

数据在子组件中，想要在父组件中操作子组件的数据或格式

数据在子组件，但是想怎么用是父组件说的算

二、语法

1、子组件

挖坑、传递数据

<!-- name 命名 gameList 传递数据 -->
<slot name="content" :gameList="gameList">默认数据</slot>

2、父组件

填坑、接收数据

<template #content="{gameList}">
    <!-- 对数据进行操作 gameList-->
</template>

三、案例

1、子组件

<template>
    <div class="games">
        <h2>游戏种类</h2>
        <!-- name 命名 gameList 传递数据 -->
        <slot name="content" :gameList="gameList">默认数据</slot>
    </div>
</template>

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

let gameList = reactive([
    {id:"01", name:"王者荣耀"},
    {id:"02", name:"刺激战场"},
    {id:"03", name:"原神"}
])
</script>

2、父组件

<template>
    <div class="app">
        <Games>
            <template #content="{gameList}">
                <!-- 对数据进行操作 -->
                <ul>
                    <li v-for="game in gameList" :key="game.id">{{ game.name }}</li>
                </ul>
            </template>
        </Games>
        <Games>
            <template #content="{gameList}">
                <ol>
                    <li v-for="game in gameList" :key="game.id">{{ game.name }}</li>
                </ol>
            </template>
        </Games>
    </div>

</template>

<script setup lang="ts" name="App">
import Games from './components/Games.vue';
</script>