Vue3之插槽

插槽：子组件提供一个占位符（<slot></slot>）,父组件可以在这个占位符填充HTML、组件等，填充的内容会替换子组件的占位符<slot></slot>

匿名插槽：没有名字，子组件添加占位符，父组件自动匹配

具名插槽：给占位符添加名字，父组件匹配名字后填充内容，适合有多个插槽的时候使用

作用域插槽：在子组件中添加动态数据，给父组件的slot使用

代码案例：

子组件：

<template>

    <div class="main">

        <div class="header">

            <!-- 具名插槽 -->

            <slot name="header"></slot>

        </div>

        <div class="contant">

            <!-- 匿名插槽 -->

            <slot></slot>

        </div>

        <div class="footer">

            <!-- 作用域插槽 -->

            <div v-for="item in 10">

                <slot name="footer" :data="item">

                </slot>

            </div>

        </div>

    </div>

</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

.main {

    width: 100%;

    height: 800px;

    display: flex;

    flex-direction: column;

    div {

        flex: 1;

    }

    .header {

        background: red;

    }

    .contant {

        background: green;

    }

    .footer {

        background: yellow;

    }

}</style>

父组件：

<template>

    <!-- 插槽 -->

    <SlotVue>

        <template v-slot:header>

            <div>我是一个具名插槽</div>

        </template>

        <template v-slot>

            <div>我是一个匿名插槽</div>

        </template>

        <!-- 具名插槽简写和作用域插槽 -->

        <template #footer="{data}">

            <div>作用域插槽</div>

            <span>{{data}}</span>

        </template>

    </SlotVue>

</template>

动态插槽

插槽可以是一个变量名

<SlotVue>

<template #[name]>

        <div>23</div>

</template>

</SlotVue>

const name = ref('header')