Vue2slot插槽（理解与应用）

1、插槽的概念

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

举个例子：组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。
我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）
如图：

2、特性

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，
适用于 父组件 ===> 子组件
应用场景：自定义的表格组件，允许用户传入自定义的结构 + 数据（从插槽中回传的）

3、插槽的类型

分为三大类：默认插槽、具名插槽、作用域插槽

3.1 默认插槽

默认插槽是最基础、最常见的插槽类型。只需在组件模板中简单地使用标签即可定义

示例：
在父级模板中使用该组件时，对应位置的内容会被插入到默认插槽处：

<!-- 父组件 -->
<template><div><h1>父组件</h1><ChildComponent><p>这是插入到子组件中的内容</p></ChildComponent></div>
</template>


<template><div><h2>子组件</h2><!-- 这里是插槽 --><slot></slot></div>
</template>

3.2 具名插槽

允许组件拥有多个可替换内容区域，每个区域都有自己的名称。可以通过给 <slot> 元素添加 name 属性来创建具名插槽，然后在父组件中使用 <slot name="slotName"> 来引用具名插槽。

示例：
在父级模板中，使用v-slot指令（或简写为#）指定插槽名，将内容分配到相应的具名插槽：

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

子组件中：<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>

3.2 作用域插槽

作用域插槽允许子组件将数据传递到父组件中的插槽内容中，使得父组件可以使用子组件中的数据进行渲染。
作用域插槽通过 <slot> 元素的 name 属性以及 <template slot-scope="props"> 来实现。
scope用于父组件往子组件插槽放的html结构接收子组件的数据

示例：

父组件中：<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>

子组件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>