插槽

默认插槽

1. 父组件可以将数据 和 结构(html ) 同时传过来 样式可以在父组设置也可以在子组件
2. 在父组中 使用双标签写法 <Home> 结构和数据</Home>
3. 在子组件中 使用 <slot> 提示内容 </slot> 指定 父组件传递过来的 位置
4. 当父组件没有对slot 进行填充时 子组件的 slot 提示内容会显示

具名插槽

1. 在子组件中给 <slot name="header"></slot> 起一个名字
2. 在父组件中 使用 slot 属性 执行 要插入哪个插槽中 slot="header"
3. 在 2.6 以后 使用 v-slot:header 注意写在 <template v-slot:header></template>
4. 如果 slot 没有名字 可以使用 v-slot:default 一个不带 name 的 <slot> 出口会带有隐含的名字“default”

作用域插槽

1. 数据在子组件中 结构在父组件中 让父组件可以用子组件的数据

2. 在父组件中 2.6之前写法

   • <div slot-scope="games">
     {{games}}
     <li v-for="(item,index) in games.games" :key="index">{{item}}</li>
     </div>

   • 新写法 可以使用es6 中的结构赋值
     <template v-slot="{ games }">
     {{ games }}
     </template>

3. 在子组件中
   
   <slot :games="games"></slot>