默认插槽
- 父组件可以将数据 和 结构(html ) 同时传过来 样式可以在父组设置也可以在子组件
- 在父组中 使用双标签写法 <Home> 结构和数据</Home>
- 在子组件中 使用 <slot> 提示内容 </slot> 指定 父组件传递过来的 位置
- 当父组件没有对slot 进行填充时 子组件的 slot 提示内容会显示
具名插槽
- 在子组件中给 <slot name="header"></slot> 起一个名字
- 在父组件中 使用 slot 属性 执行 要插入哪个插槽中 slot="header"
- 在 2.6 以后 使用 v-slot:header 注意写在 <template v-slot:header></template>
- 如果 slot 没有名字 可以使用 v-slot:default 一个不带 name 的 <slot> 出口会带有隐含的名字“default”
作用域插槽
数据在子组件中 结构在父组件中 让父组件可以用子组件的数据
-
在父组件中 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>
在子组件中
<slot :games="games"></slot>
