Vue 插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件。

默认插槽的使用：

（1）组件标签必须是左右闭合的，把想要放入插槽的HTML标签写入组件标签之中，需要数据的地方可以直接从data中获取使用

（2）在对应组件的模板中想要插入html标签的位置使用<slot></slot>标签即可

父组件中：
<Category title="游戏" >
	<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
	<ul>
		<li v-for="(g,index) in games" :key="index">{{g}}</li>
	</ul>
</Category>

子组件中：
<template>
	<div>
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

具名插槽的使用：

可以实现根据位置需要向指定位置插入插槽

（1）在子组件设置slot标签时给其添加一个name属性

（2）在组件标签内部书写HTML时 给对应标签绑定 slot="设置好的name属性值"

      技巧：若标签比较多 可以把他们共同放到一个 div 中或者 template 中

 父组件中：
           <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>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。子组件通过slot标签给父组件传递数据。

例：games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定。

使用：

（1）数据在子组件身上，给子组件中的slot标签绑定动态数据

（2）父组件使用组件标签时配置标签属性： scope="xxx"，此时子组件在slot标签上绑定的数据就会存到scope="xxx"的xxx变量上，可以通过其进行数据的渲染，支持解构赋值。

<template> // 父组件
	<div>

		<Category title="游戏">
			<template scope="atguigu"> //通过子组件slot标签绑定的数据都存在了atguigu变量
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏">
			<template scope="{games}"> // 解构赋值
				<ol>
					<li v-for="(g,index) in games" :key="index">{{g}</li>
				</ol>
			</template>
		</Category>

	</div>
</template>

<template> // 子组件
	<div>
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
        <!-- 此时msg的值和games的值会以对象的形式一起传给父组件配置的scope变量中 -->
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>