vue中slot的使用

vue3的slot的理解，应用

1，什么是插槽

插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

2、插槽的分类

插槽有三种：默认插槽、具名插槽、作用域插槽。

默认插槽:又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。 具名插槽: 带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽.作用域插槽:默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插博的不同点是在了组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

默认插槽

#children子组件文件
<template>
    <div class="qwert">
        子组件
        <h1>
           #默认插槽&匿名插槽
            <slot></slot>
        </h1>
    </div>
</template>
#父组件
<template>
 <div class="wert">
    父组件
​
 <Children>
 #使用#default或v-slot:default来在默认插槽中添加数据
    <template #default>
        我是父组件传过来的
    </template>
 </Children>
 </div>
</template>
​
<script setup>
import Children from "./children.vue"
</script>

​

具名插槽

#children子组件文件
<template>
    <div class="qwert">
        子组件
        <h1>
            <slot></slot>
        </h1>
        #具名插槽使用name命名
        #header
        <header>
            <slot name="header"></slot>
        </header>
        #main
        <main>
            <slot name="main"></slot>
        </main>
        #footer
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
#父组件
<template>
 <div class="wert">
    父组件
​
 <Children>
    <template #default>
        我是父组件传过来的
    </template>
    #通过名称使用插槽
    #header
    <template #header>
        我是父组件传过来的头部
    </template>
    #main
    <template #main>
        我是父组件传过来的中间
    </template>
    #footer
    <template #footer>
        我是父组件传过来的底部
    </template>
 </Children>
 </div>
</template>
​
<script setup>
import Children from "./children.vue"
</script>

作用域插槽

children子组件
<template>
    <div class="qwert" v-for="item in props.data" :key="item">
        子组件
        <h1>
            <slot :slt="item"></slot>
        </h1>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot name="main" :text="item"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
​
<script setup>
let props=defineProps(['data']);
​
</script>
#父组件
<template>
 <div class="wert">
    父组件
​
 <Children :data="data">
    <template #default="slot">
        {{ slot.slt }}
    </template>
    <template #header>
        我是父组件传过来的头部
    </template>
    <template #main="slot">
        我是父组件传过来的中间
        {{ slot.text }}
    </template>
    <template #footer>
        我是父组件传过来的底部
    </template>
 </Children>
 </div>
</template>
​
<script setup>
import Children from "./children.vue"
let data=[
    "a","b","c","d","e","f"
]
</script>