【VUE_插槽】

作用

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

分类

默认插槽

在组件标签中插入html结构，然后在子组件中使用标签对接收html结构

 父组件：
 <fuzujian> 
 		<div>html结构</div>
 </fuzujian>
 子组件：
 <template>
 	<div>
		<slot>默认插槽内容，没有人传入结构时默认显示</slot>
	</div>
 </template>

具名插槽

在默认插槽的基础上，为每个slot起名name，然后每个tamplate设置slot参数表示向对象的slot传

 父组件：
 <fuzujian> 
 	<template slot="center">
 		<div>html结构1</div>
 	</template>
 	<template slot="footer">
 		<div>html结构2</div>
 	</template>
 </fuzujian>
 子组件：
 <template>
 	<div>
		<slot name="center">默认插槽内容，没有人传入结构时默认显示</slot>
		<slot name="footer">默认插槽内容，没有人传入结构时默认显示</slot>
	</div>
 </template>

作用域插槽

数据在组件自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在fuzujian组件中，但使用数据锁边理出来的结构有APP决定）

父组件中

			<fuzujian title="游戏" >
				<template scope="{games}"><!-- {}es6结构赋值 -->
					<ul>
						<li v-for="(g,index) in games" :key="index">{{g}}</li>
					</ul>
				</template>
			</fuzujian >
			
			<fuzujian title="游戏" >
				<template scope="xie"><!-- 正常结构 -->
					<ol>
						<li v-for="(g,index) in xie.games" :key="index">{{g}}</li>
					</ol>
				</template>
			</fuzujian >
子组件中
			<template>
				<div>
					<h3>{{title}}分类</h3>
					<ul>
						<slot :games="games"></slot>
					</ul>
				</div>
			</template>
			<script>
				export default{
					name:'Category',
					props:['title'],
					data(){
						return{
							games:['红色警戒','穿越火线','QQ飞车','超级玛丽','英雄联盟'],
						}
					},
				}
			</script>