slot 插槽

1. 作用

让父组件可以向子组件的指定位置插入HTML结构，也是一种组件之间通信的方式，适用于 父组件--->子组件

2.分类

默认插槽
- 理解：就是在父组件中，使用子组件标签的地方，标签内部写上HTML结构；然后就会插入到子组件中所在地方
- 简单来说，就是在子组件中挖了一个坑，在父组件中将这个坑填上

// 父组件中
<Category>
    <div>
        html结构
    </div>    
</Category>



// 子组件中
<template>
    <div>
        <!-- 插槽部分 -->
        <slot></slot>
    </div>
</template>

具名插槽
- 理解：我们需要将不同的HTML结构放到不同的插槽当中，就可以给这些插槽起名字；父组件在“填坑”的时候也需要指定“坑”的名字

// 父组件中
<Category>
    <template slot="center">
        <div>
            html结构
        </div>
    </template>
    
    <template v-slot="footer">
        <div>
           html结构
        </div>
    </template>
</Category>


// 子组件中
<template>
    <div>
        <!-- 插槽部分 -->
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>

作用域插槽
- 理解：数据在子组件的自身，但根据数据生成的结构要通过组件的使用者（父组件）来决定，例如：一组数据，渲染成有序列表还是无序列表，需要靠父组件来决定
- 作用域插槽也可以有name（就是具名插槽）

// 父组件中
<Category>
    <template scope="scopeData">
        <!-- 渲染的是ul列表 -->
        <ul>
            <li v-for="(items,index) in scopeData.games">{{items}}</li>
        </ul>
    </template>
    
     <template scope="scopeData">
        <!-- 渲染的是h4列表 -->
        <h4>
            <li v-for="(items,index) in scopeData.games">{{items}}</li>             
        </h4>
    </template>  
</Category>



// 子组件中
<template>
    <div>
        <!-- 插槽部分 -->
        <slot :games="games"></slot>
    </div>
</template>

export default{
    name:"Category",
    data(){
        return{
            games:["红色警戒","穿越火线"]
        }   
    }
}

vue 三种 slot 插槽

slot 插槽

1. 作用

2.分类