vue3插槽使用、默认插槽、具名插槽、插槽传参

插槽

子组件接受父组件传输的一些模板片段,当某个组件的某个片段需要根据使用者的需要自定义时，这是时候就需要使用插槽让使用者自定义组件的某个部分

默认插槽

默认插槽slot,默认为模块插入位置，slot里面有模块

插槽组件

<template>
    <div class="box">
        <h1>标题</h1>
        <div class="content">
            <slot>
                <img 
                  src="https://imgapi.xl0408.top/index.php" >
            </slot>
        </div>
    </div>
</template>

父组件

<template>
    <div>slot 插槽</div>
    <div>
    
    </div>
    <content>
        //此时没有内容，默认是插槽组件中的img
    </content>
    <content>
        //此时插入有内容 显示的就为插入内容
        <div class="login">
            <input type="text">
            <button type="button">登录</button>
        </div>
    </content>

</template>

效果：

具名插槽

当插槽需要有多个插入区域时，就需要一个名字了

插槽组件

<template>
    <div class="box">
        <div class="header">
            <h1>标题</h1>
            <slot name="header">
                <h1>我的标题</h1>
            </slot>
        </div>
        <div class="content">
            <slot>
                <img src="https://imgapi.xl0408.top/index.php" alt="" srcset="">
            </slot>
        </div>
        <div class="footer">
            <h1>底部</h1>
            <slot name="footer">
                <h1>我的底部</h1>
            </slot>
        </div>
    </div>
</template>

父组件

<template>
    <div>slot 插槽</div>
    <div>
    
    </div>
    <content>
    </content>
    <content>
        <template #header>
            <text style="color: red;">插入头部</text>
        </template>
        <div class="login">
            <input type="text">
            <button type="button">登录</button>
        </div>
        <template #footer>
            <text style="color: red;">插入底部</text>
        </template>
    </content>
</template>

效果：

插槽传参

子组件的数据想要传递到父组件使用时，就需要使用插槽传参

插槽组件

<template>
    <div class="box">
        <div class="header">
            <h1>标题</h1>
            <slot name="header">
                <h1>我的标题</h1>
            </slot>
        </div>
        <div class="content">
            <slot  :data = "data">
                <img src="https://imgapi.xl0408.top/index.php" alt="" srcset="">
            </slot>
        </div>
        <div class="footer">
            <h1>底部</h1>
            <slot name="footer">
                <h1>我的底部</h1>
            </slot>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
    {
        id:1,
        name:'jk'
    },
    {
        id:2,
        name:'j2'
    },
])
</script>

父组件

<template>
    <div>slot 插槽</div>
    <div>
    </div>
    <content>
    </content>
    <content >
        <template #header>
            <text style="color: red;">插入头部</text>
        </template>
        <!-- <div class="login">
            <input type="text">
            <button type="button">登录</button>
        </div> -->
        <template #default="{data}">
            <div>{{ data }}</div>
            <div class="title">id - name</div>
            <div v-for="item in data" :key="item.id" class="content">{{ item.id }} - {{ item.name }}</div>
        </template>
        <template #footer>
            <text style="color: red;">插入底部</text>
        </template>
    </content>
</template>

效果

{{ item.name }}

<template #footer>
插入底部

效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b4630eee26074d3eab9c894b1bf539de.png#pic_center)