使用 solt 分发内容

什么是 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>