什么是 slot
- 当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到 slot，这个过程叫做内容分发（transclusion）
- props 传递数据，events 触发事件和 slot 内容分发就构成了 Vue 组件的3个 API，再复杂的组件也是由这3个部分构成。
作用域
- 子组件的内容在子组件的作用域编译
- 父组件的内容在父组件的作用域编译
solt 用法
单个 solt
具名 solt
子组件
<slot name="header"></slot>
父组件
<div solt="header"></div>
如果没有使用 name 特性，将会作为默认 slot 出现，父组件没有使用 slot 特性的元素与内容都将出现在这里。
作用域插槽
<template slot='slotName' scope="props">
子组件在 slot 上提供的数据可以通过 props.paramtorsName 获取到
<slot name="book" :book-name="book.name"></slot>
父组件中可以通过 props 拿到book-name 的值
<template slot='slotName' scope="props">
{{props.bookName}}
</template>
网友评论