父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。
一、默认插槽
<div class="category"><h3>{{title}}分类</h3><slot>插槽，当使用者没有传递具体介都时出现</slot><!--声明插槽--></div>
<div class="container"><CateGory title='美食'><img src="./img/asd.jpg" alt="" style="width: 100%;"/><!--使用插槽--></CateGory></div>
二、具名插槽 声明插槽时指定name属性 用于区别每个插槽 便可以声明多个插槽
<div class="category"><h3>{{title}}分类</h3><slot name='center'>center插槽，当使用者没有传递具体介都时出现</slot><slot name='footer'>footer插槽，当使用者没有传递具体介都时出现</slot></div>
使用时也要指定使用的是哪一个插槽，使用插槽时用slot属性或v-slot属性 指定定义时的name值，但是v-slot只能使用在<template>节点中
一个插槽可以使用多次 但是并不推荐 可以使用<template>节点包裹起来
<div class="container"><CateGory title='美食'><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/><a slot="footer" href="http://www.baidu.con">美食广场</a></CateGory><CateGory title='游戏'><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/></CateGory><CateGory title='电影'><template v-slot:center><img src="./img/asd.jpg" alt="" style="width: 100%;"/><img src="./img/asd.jpg" alt="" style="width: 100%;"/></template></CateGory></div>
三、作用域插槽，可以实现 插槽定义者 向 组件使用者传递数据。
数据存放在定义插槽的组件，却被父组件使用
通过 :数据名='数据名’传递给父组件
父组件通过 <template>节点中的scope属性接受数据对象
可同时向父组件传递多组数据 因为父组件接收的是对象
<div class="category"><h3>{{title}}分类</h3><slot :foods='foods'>center插槽，当使用者没有传递具体介都时出现</slot></div>
<CateGory title='美食'><template scope="dataObject"><ul><li v-for="(food,index) in dataObject.foods" :key="index">{{food}}</li></ul></template></CateGory>
