Vue插槽

作用：

让父组件可以向子组件指定位置插入html结构，也是组件间传递数据的一种方式
 分类：默认插槽、具名插槽、作用域插槽
 默认插槽：

在子组件的某个位置定义一个插槽标签，用于表明父组件中的html结构会被插在此处

例如

定义一个插槽，使用slot 标签



每次在父组件种调用子组件的时候，将要传递的html结构传进去就可以了



注意使用 video标签时，如果视频不能控制播放，添加属性  controls 就可以控制视频的播放了
 具名插槽：

用于子组件中有多个插槽的情况，需要为每一个插槽指定名字，使用属性 name，如下图所示，子组件中定义了两个插槽



父组件向子组件中传递html数据的时候需要指定插槽名称，使用slot 属性指定将对应的html结

构传递到哪个插槽



如果要传递的html结构有多个，建议使用  template 标签包裹起来，然后统一指定 slot，

使用template 标签的时候可以使用新属性指定插槽， v-slot:footer，这时候footer就不需要

加双引号了，但是，v-slot 只能用在template 标签上，用在其他标签上会报错，如div。
 作用域插槽：

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

如下图，子组件中有自己的数据，使用  :games 将自己的数据体传递给调用者， :games是自己随意起的名字



父组件在调用子组件的时候需要指定属性  scope 或者 slot-scope 来接收数据，如下图所示