Vue中使用Slot分发内容

使用slot分发内容

使用一种方式混合父组件的内容与子组件自己的模版，这个过程被称为“内容分发”。在子组建中使用特殊的<slot>元素作为容器的插槽。

单个slot

在子组件模版中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用。
如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。

子组件模版中没有slot标签，父组件提供的内容会被覆盖掉。

template: `
                <div>
                    <ul>
                        <slot><div>我是默认的结构</div></slot>
                        <li>这是第一个提醒</li>
                        <li>这是第二个提醒</li>
                        <li>这是第三个提醒</li>
                    </ul>
                </div>
            `

1. 父组件无内容

<custom></custom>

result

2. 父组件有内容

 <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。

编译作用域

• 父组件模版的内容在父组件作用域内编译
• 子组件模版的内容在子组件作用域内编译