Vue2中的插槽使用

概述：插槽（slot）,就是可以动态的往组件中传递 html 结构，也是父子组件通讯的一种表现形式
父 => 子

插槽的分类

默认插槽

在子组件中：，通过放置一个 slot 标签 来 定义插槽的放置位置，使用默认标签 即为默认插槽

<template>
    <div class="logInformation">
        <div>
            <span>数据分析管理系统</span>
            <el-divider></el-divider>
            <img :src="imgurl" alt="" />
            <span>欢迎你|{{ username }}</span>
        </div>
        <slot></slot>         <!--  在子组件中，可以放置一个 slot 标签用来占位 放置 传入进来的 结构体，当slot 标签中如果写了数据，就代表定义了 默认内容，如果外部没有传入结构，则默认结构就会生效，反之如果外部传入了，则会覆盖默认结构 -->
    </div>
</template>

父组件：在父组件中，我们可以写组件标签体，标签体里面的内容，就会被当做结构传入进去

<template>
    <div class="asisdbox">
        <Asidetop>   <!-- 组件 -->
            <div>外部传入的结构数据</div>   <!--  标签体作为结构传入进去 -->
        </Asidetop>
    </div>
</template>

具名插槽

如果在子组件中，需要有多处地方接收 外部传入的结构体，就需要放置多个 slot 标签，但是 放置多个 slot 默认插槽，会造成结构体污染，以及出现多处重复结构体，为 解决这个问题，可以为每个插槽定义一个名字，用来指定插槽放置指定的数据

在子组件的 slot 标签上 添加 name 属性 用来 指定 插槽名

<template>
    <div class="logInformation">
        <div>
            <span>数据分析管理系统</span>
            <el-divider></el-divider>
            <img :src="imgurl" alt="" />
            <span>欢迎你|{{ username }}</span>
        </div>
        <slot name="box"></slot>
        <slot name="nums"></slot>        <!-- -->
    </div>
</template>

在父组件中 通过 v-slot:来指定当前标签体内容，传入到哪个插槽位置

<template>
    <div class="asisdbox">
        <Asidetop>   <!-- 组件 -->
             <template v-slot:box>
                <div>外部传入box的结构数据</div>
            </template>   <!--  标签体作为结构传入进去 -->
            
             <template v-slot:nums>
                <div>外部传入nums的结构数据</div>
            </template>
        </Asidetop>
    </div>
</template>

作用域插槽

概念理解：当数据在组件组件自身，而外部传入的组件结构，需要根据数据的不同，展示不同的结构的时候，就需要使用作用域插槽

在子组件的 slot 标签上 添加 name 属性 用来 指定 插槽名

<template>
    <div class="logInformation">
        <div>
            <span>数据分析管理系统</span>
            <el-divider></el-divider>
            <img :src="imgurl" alt="" />
            <span>欢迎你|{{ username }}</span>
        </div>
        <slot :transmit="list" :USERname="username"></slot>   <!-- 将数据传入给插槽使用者 -->
    </div>
</template>
<script>

export default {
    data() {
        return {
            username: "小张",
            list:["读书","旅游","运动"]
        };
    },
};
</script>

在父组件中 可以使用 v-slot:default 来接收插槽逆向传递过来的数据，然后再根据 数据的类型，生成不一样的数据结构体

<template>
    <div class="asisdbox">
        <Asidetop>
            <template v-slot:default="{ transmit }">
                <div>{{ transmit }}</div>
            </template>
        </Asidetop>
        <Asidetop>
            <template v-slot:default="{ USERname }">
                <div>{{ USERname }}</div>
            </template>
        </Asidetop>
    </div>
</template>

注明：作用域插槽 依然可以命名成具名插槽

点击查看官方文档，了解更多slot 属性