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)容只有在沒有要分發(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)容片段使用,如果沒有默認(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è)頁面標(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è)頁面標(biāo)題</h1>
</header>
<main>
<p>主要內(nèi)容的一個(gè)段落。</p>
<p>另一個(gè)主要段落族奢。</p>
</main>
<footer>
<p>這里有一些聯(lián)系信息</p>
</footer>
</div>
例子: