slot--使用插槽分發(fā)內(nèi)容（位置、槽口；作用: 占個(gè)位置）

官網(wǎng)API： https://cn.vuejs.org/v2/guide/components.html#使用插槽分發(fā)內(nèi)容

使用組件時(shí)，有時(shí)子組件不知道會(huì)收到什么內(nèi)容，這是由父組件決定的。

一、單個(gè)插槽

1.my-component 組件:
<div>
    <h2>我是子組件的標(biāo)題</h2>
    <slot>
        這段內(nèi)容只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。
    </slot>
</div>

2.父組件：
<div>
    <h1>我是父組件的標(biāo)題</h1>
    <my-component>
        <p>這是一些初始內(nèi)容</p>
        <p>這是更多的初始內(nèi)容</p>
    </my-component>
</div>

3.渲染結(jié)果：
<div>
    <h1>我是父組件的標(biāo)題</h1>
    <div>
        <h2>我是子組件的標(biāo)題</h2>
        <p>這是一些初始內(nèi)容</p>
        <p>這是更多的初始內(nèi)容</p>
    </div>
</div>

二、具名插槽

slot根據(jù)不同的name名稱分發(fā)內(nèi)容，多個(gè)插槽可以有不同的名字。

仍然可以有匿名的默認(rèn)插槽，為了找不到匹配的內(nèi)容片段使用，如果沒(méi)有默認(rèn)插槽，這些找不到匹配的內(nèi)容片段將被拋棄。

1.my-component 組件:
<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

2.父組件：

<my-component>
    <h1 slot="header">這里可能是一個(gè)頁(yè)面標(biāo)題</h1>
    <p>主要內(nèi)容的一個(gè)段落。</p>
    <p>另一個(gè)主要段落。</p>
    <p slot="footer">這里有一些聯(lián)系信息</p>
</my-component>

3.渲染結(jié)果：
<div class="container">
    <header>
        <h1>這里可能是一個(gè)頁(yè)面標(biāo)題</h1>
    </header>
    <main>
        <p>主要內(nèi)容的一個(gè)段落。</p>
        <p>另一個(gè)主要段落。</p>
    </main>
    <footer>
        <p>這里有一些聯(lián)系信息</p>
    </footer>
</div>

例子：

Slot插槽.png