什么是Vue中的slo？有什么作用？

slot是一个用于组件模板构建中用于内容分发的机制，内容分发 和 组件复用
定义占位符

slot高阶用法

默认插槽


<template>
    <div class="container">
        <child-comp>
            <p>默认插槽</p>
        </child-comp>
    </div>
</template>
 
<script setup lang="ts" name="SlotDemo"></script>
 
<style scoped lang="scss"></style>


<template>
    <div name="default">
        <slot></slot>
    </div>
</template>
 
<script setup lang="ts" name="ChildComp"></script>
 
<style scoped lang="scss"></style>

具名插槽

使用插槽名，可以是组件内部存在多个插槽，根据名称进行内容分发


<template>
    <div class="container">
        <child-comp>
            <template #header>
                <p>命名插槽header位置</p>
            </template>
            <template v-slot:main>
                <p>命名插槽main位置</p>
            </template>
            <template #footer>
                <p>命名插槽footer位置</p>
            </template>
        </child-comp>
    </div>
</template>
 
<script setup lang="ts" name="SlotDemo">
</script>
 
<style scoped lang="scss"></style>


<template>
    <div name="default">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot name="main"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
 
<script setup lang="ts" name="ChildComp"></script>
 
<style scoped lang="scss"></style>

作用域插槽

Scoped Slots

允许父组件使用子组件提供的数据


<template>
    <div class="container">
        <slot :msg="这是子组件的msg"></slot>
    </div>
</template>
 
<script setup lang="ts" name="ScopeSlots"></script>
 
<style scoped lang="scss"></style>


<template>
    <div class="container">
        <scope-slots v-slot:default="slotProps">
            <p>{{ slotProps.msg }}</p>
        </scope-slots>
    </div>
</template>
 
<script setup lang="ts" name="SlotDemo">
import scopeSlots from './scopeSlots.vue';
</script>
 
<style scoped lang="scss"></style>