使用slot分发内容
使用一种方式混合父组件的内容与子组件自己的模版，这个过程被称为“内容分发”。在子组建中使用特殊的<slot>元素作为容器的插槽。
单个slot
在子组件模版中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用。
如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。
子组件模版中没有slot标签，父组件提供的内容会被覆盖掉。
template: `
<div>
<ul>
<slot><div>我是默认的结构</div></slot>
<li>这是第一个提醒</li>
<li>这是第二个提醒</li>
<li>这是第三个提醒</li>
</ul>
</div>
`
- 父组件无内容
<custom></custom>
result
- 父组件有内容
<custom>
<p>一个奇怪的dom标签</p>
</custom>
result
具名slot
slot元素可以用一个特殊的属性name来配置如何分发内容。可以使用一个匿名的slot，处理那些没有对应slot的内容。最终渲染顺序以子组件内的顺序为准。
逐个渲染
<custom>
<div slot="three">33333</div>
<div slot="one">11111</div>
<div slot="two">22222</div>
<div slot="one">11111</div>
</custom>
template: `
<div>
<slot name="one"> <p>这是第一个提醒</p></slot>
<slot name="two"> <p>这是第二个提醒</p></slot>
<slot name="three"> <p>这是第三个提醒</p></slot>
</div>
`
result
批量渲染
在这里可以在父组件中使用内置标签<template>来组合批量管理，无需逐个挂载slot属性。
<custom>
<div slot="three">33333</div>
<div slot="two">22222</div>
<template slot="one">
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
</template>
</custom>
未命名
如果父组件内自定义模版没有挂载slot，则会渲染为子组件内的无名slot。
编译作用域
- 父组件模版的内容在父组件作用域内编译
- 子组件模版的内容在子组件作用域内编译
