Vue的插槽

插槽：组件标签的标签体内容是不能解析的，要解析就要用到插槽，比如一个<Category/>插槽，一般使用的是自闭合就用上了这个插槽，但是如果<Category>你好！</Category>这个标签体内容“”你好！“”就不能解析出来，使用插槽解决问题。
1.默认插槽
在定义组件Category的时候

<h2>呵呵呵</h2>
<slot></slot>

这样“你好！”就会显示在<slot>的位置，相当于是挖了一个坑，内容填在这个坑里。
2.具名插槽

<slot name="slot1"></slot>
<h2>呵呵呵</h2>
<slot name="slot2"></slot>

给插槽命名，以后新加的内容，也通过slot="slot1"或slot=slot2“”来填充指定的位置，比如

<Category> 
 <div solt="slot1">
 把我放在插槽1的位置
</div>
 <div solt="slot2">
 把我放在插槽2的位置
</div>
</Category>

这样就会在渲染时，将新增的标签体内容

 <div solt="slot1">
 把我放在插槽1的位置
</div>

放在指定的

<slot name="slot1"></slot>---slot="solo1"的位置
<h2>呵呵呵</h2>
<slot name="slot2"></slot>

3.作用域插槽
理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）。
比如Category组件有一个games数组，里面是几条游戏。APP组件要生成3个Category组件，那么自然是引入组件复用3次，现在有一个需求是，这3个Category组件展示游戏数据的形式分别是有序列表、无序列表和h4标题，那么渲染的时候遍历games一定不行，因为，APP没有games 它放在Category组件里，首先传递数据
在定义插槽的时候：

<slot :games="games"></slot>

<Category></Category>内容

<template scope="{games}"

然后遍历的时候用这个games遍历 就能得到不同的结构。这就是作用域插槽。