組件化開發(fā)是活的，那么我們?nèi)绾伟汛a寫活呢？如果后續(xù)有功能想添加到現(xiàn)有組件上我們又如何是好？

一臺電腦，有多個插孔用于拓展，都是在原有基礎(chǔ)上進(jìn)行了功能的拓展，甚至可以進(jìn)行升級，那么同理，我們的代碼也可以這樣。

這時候就輪到我們的slot插槽出場了

它呢是寫在組件模板內(nèi)的，分為普通插槽，具名插槽和作用域插槽，三者都可以設(shè)置默認(rèn)內(nèi)容，在使用的時候，在它的標(biāo)簽內(nèi)部插入內(nèi)容。

普通插槽：

<template id="son">
?<div>
? ?<h2>插槽的使用</h2>
? ?<slot><span>我是插槽</span></slot>//設(shè)立插槽，并添加默認(rèn)內(nèi)容
?</div>
</template>

<div id="app">
?<cpn></cpn>
</div>

插入內(nèi)容后：

<div id="app">
?<cpn>
? ?<p>我是一號，插進(jìn)來了</p> //標(biāo)簽內(nèi)部插入內(nèi)容

? ?<p>我是二號，插進(jìn)來了</p>
? ?<p>我是三號，插進(jìn)來了</p>
?</cpn>
</div>

我們發(fā)現(xiàn)插入的內(nèi)容作為一個整體覆蓋了默認(rèn)內(nèi)容

具名插槽：為每個插槽賦予名字。

@當(dāng)不進(jìn)行任何操作，僅僅賦名時

<template id="son">
?<div>
? ?<h2>插槽的使用</h2>
? ?<slot name="one"><span>我是插槽1</span></slot>
? ?<slot name="two"><span>我是插槽2</span></slot>
? ?<slot name="three"><span>我是插槽3</span></slot>
?</div>
</template>

<div id="app">
?<cpn>
? ?<p>我是一號，插進(jìn)來了</p>//具名函數(shù)就算插入內(nèi)容，也會顯示默認(rèn)內(nèi)容
? ?<p>我是二號，插進(jìn)來了</p>
? ?<p>我是三號，插進(jìn)來了</p>
?</cpn>
</div>

@當(dāng)為組件標(biāo)簽內(nèi)容指定slot名字時

作用域插槽：在模板插槽內(nèi)動態(tài)設(shè)定一個變量用來存放子組件內(nèi)指定數(shù)據(jù)。然后在子組件標(biāo)簽內(nèi)部，通過模板，指定作用域，通過這個作用域，拿到我們的數(shù)據(jù)。

data(){
?return {
? ?message:'子組件中的數(shù)據(jù)',
? ?movies:['海賊','火影','海王','喜羊羊']
?}

<template id="son">
?<div>
? ?<slot :slotdata="movies"></slot>//動態(tài)設(shè)定變量，接收子組件內(nèi)部movies數(shù)據(jù)
?</div>
</template>

<div id="app">
?<cpn>
? ?<template slot-scope="slot">//在子組件標(biāo)簽內(nèi)部，通過模板，指定作用域

? ? ?<span>
? ? ? ?{{slot.slotdata}}//通過這個作用域，拿到我們的數(shù)據(jù)

? ? ?</span>
? ?</template>
?</cpn>
</div>