五、Vue3基础之五

---

一、vue3 slot

插槽是子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码，如html、组件等。
子组件提供坑，坑里填什么由父组件决定。

子组件挖坑：

<template>

    <div>
        <div class="div1">
            <!-- 匿名插槽 挖坑 -->
            <slot></slot>
        </div>
        <div class="div2">
            <!-- 挖坑-->
            <slot name="div2"></slot>
        </div>
        <div class="div3">

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

<script setup lang='ts'>
import {
      ref, reactive } from 'vue'

</script>

<style lang='scss' scoped>
.div1{
     
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.div2{
     
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}
.div3{
     
    width: 200px;
    height: 200px;
    background-color: pink
}

</style>

父组件填坑

<template>
    <div>
        右侧内容区域
        <A>
            <!-- 填坑 -->
            <template v-slot>
                <h2>匿名插槽</h2>
            </template>
            <template v-slot:div2>
                <h2>具名插槽</h2>
            </template>
        </A>
    </div>
</template>

<script setup lang='ts'>
import {
      ref, reactive, markRaw } from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
</script>
<style lang='scss' scoped>
</style>

子组件通过插槽向父组件传数据
子组件

<template>

    <div>
        <div class="div1">
            <!-- 匿名插槽 -->
            <slot></slot>
        </div>
        <div class="div2">
            <div v-for="(item, index) in data">
                <!-- 通过这个坑向父组件传数据过去了 -->
                <slot name="div2" :index="index" :data="item"></slot