slot插槽的使用(vue3中)

一般用于在公共组件的基础上插入个人需要的内容 ，有三种:匿名插槽、具名插槽、作用域插槽

1、匿名插槽

一般只能插入一段内容，想插入多个文本就要用具名插槽进行标识

不能使用具名插槽的template；

下面向父组件（slotParent1.vue）中插入一段文本‘匿名插入文本1’

<script setup>
import slotChildren from './slot-children.vue'
</script>

<template>
    <div class="demo1">
        <slotChildren>
                <div>匿名插入文本1</div>
        </slotChildren>
    </div>
</template>

子组件slotChildren，其中的slot对应父组件里div中的内容

<script setup>
</script>

<template>
    <div>
        <slot></slot>
        <div>我是孩子插槽</div> 
    </div>
</template>

<style scoped>
</style>

效果：

 

2、具名插槽

用于插入多段内容

在子组件的slot上加上 name="插槽的name"

在父组件中要加上template，而且template上要加上 #对应具名插槽的name

父组件slotParent2.vue:

<script setup>
import slotChildren from './slot-children.vue'
</script>

<template>
    <div class="demo2">
        <slotChildren>
            <template #header>
                <div>具名插入文本1</div>
            </template>
            <template #footer>
                <div>具名插槽文本2</div>
            </template>
    </slotChildren>
    </div>
</template>

子组件slotChiledren.vue:

<script setup>
</script>

<template>
    <div>
        <slot name="header"></slot>
        <div>我是孩子插槽</div> 
        <slot name="footer"></slot>
    </div>
</template>

效果：

3、作用域插槽

用于传值，注意要在具名插槽标记的基础上使用

在子组件的slot中用 :名称 = ' 数据名' 

父组件的template中用  #对应具名插槽的name='名称'

如，父组件slotParent3.vue：

<script setup>
import slotChildren from './slot-children.vue'
</script>

<template>
    <div class="demo3">
        <slotChildren>
            <template #header='{text}'>
                <div>作用域插槽插入文本</div>
                {{ text }}
            </template>
    </slotChildren>
    </div>
</template>

 子组件slotChildren.vue

<script setup>
const text = '我是插入的值1'
</script>

<template>
    <div>
        <slot name="header" :text='text'></slot>
        <div>我是孩子插槽的值</div> 
        <slot name="footer"></slot>
    </div>
</template>

效果: