Vue中的slot插槽

让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信方式，适用于 父组件==>子组件

默认插槽

父组件往子组件标签内部放东西时，Vue不知道该放哪，需要在放的地方定义一个插槽（挖个坑，等组件使用者进行填充）。

子组件中：

<slot>默认值，没有传递具体结构时，会出现</slot>

具名插槽

name属性给<slot>起名字，组件标签内的标签设置slot属性为匹配插槽<slot>标签的name属性

子组件中：

<slot name="footer">默认值，没有传递具体结构时，会出现</slot>

用<template>包裹插槽结构时可以写成如下简写：

footer为匹配插槽名

父组件中：

<template v-slot:footer></template>

作用域插槽

数据在定义插槽的组件（子），需要根据数据生成结构的是插槽的使用者（父）。

会将定义插槽的组件数据games传递给插槽的使用者

传递给<slot>的结构必须由<template scope="">包裹，才能拿到数据，scope也可以写slot-scope

scope的值自定义，比如hello，通过hello.games拿到数据

子组件中：

数据在子组件本身

<slot :games="games">默认值，没有传递具体结构时，会出现</slot>