插槽的作用
让父组件可以向子组件插入 HTML 结构，也是一种组件间的通讯方式，适用于父组件===>子组件。
插槽的分类
- 默认插槽
// 父组件中
<Category>
<div>html 结构</div>
</Category>
// 子组件中
<template>
<div>
<!-- 定义插槽-->
<slot>插槽的默认内容</slot>
</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>- 作用域插槽
数据在组件的自身，但根据生成的结构需要组件的使用者来决定。（games 数据在 Category 组件自身，但使用 games 数据遍历出来的结构由 APP 组件决定）
// 父组件
<Category>
<template scope="scopeData">
<ul>
<li v-for="g in scopeData.games" key="g.id">{{g.name}}</li>
</ul>
</template>
</Category>
// 子组件
<slot :games='games'></slot>
DealerShadow说道： 
Google Chrome 
Windows 10
AllInAce说道： 
DealerShadow说道：