今天学习了Vue的插槽，在这之前学习使用组件的使用还没有试过在父组件中给子组件插入html结构，今天学习的插槽正是拿来实现这一功能的，这也是一种组件中通信的方式，首先插槽分为三类：默认插槽、具名插槽、作用域插槽。接下来分别看一下它们的使用方法。
默认插槽：
//父组件中：
<Category>
<div>html结构1</div>
</Category>
//子组件中：
<template>
<div>
<!--定义插槽-->
<slot>插槽默认内容...</slot>
</div>
</template>父组件div标签中的html都将会被放到子组件的slot标签中（slot标签是不会出现在真实DOM上的），slot标签内还可以设置默认值，当没有接收到父组件传来的html结构时，默认值就会插入。
具名插槽：
//父组件中:
<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>默认插槽只能使用一个，而具名插槽可以使用多个，多个则需要通过给插槽命名来准确插入。先在子组件中定义插槽时并通过name属性给该插槽起名，在父组件使用的template标签（该标签不会被渲染到真实DOM上）通过slot=""或v-slot:（新语法）语法来确定插入相当于的插槽内。
作用域插槽：
//父组件中
<Category>
<template scope="scopeData"> //scope的值可以自定义
<!--生成的是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",
prope:['title'],
//数据在子组件自身
data() {
return {
games:['红警'，'穿越火线','劲舞团','超级玛丽']
}
}
}
</script>作用域插槽适用于需要的数据在子组件上的时候，可以理解为数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。使用方法首先在子组件插槽slot标签中绑定一个向外可以访问的自定义名字（比如代码中的games），父组件只需在template标签中配置scope或slot-scope（新语法），值是自定义的，但要访问到子组件里面的数据就需要在值的后面通过（.子组件自定义的名字）来获得。
