本篇內(nèi)容主要講解“vue中有哪些插槽”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue中有哪些插槽”吧!
甕安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！
vue中有3種插槽：1、默認(rèn)插槽，語(yǔ)法“”；2、具名插槽，語(yǔ)法“”；3、作用域插槽，語(yǔ)法“”。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
vue的插槽（slot）主要分三種：
默認(rèn)插槽，具名插槽，作用域插槽
vue中的插槽，指的是子組件中提供給父組件使用的一個(gè)占位符；
用標(biāo)簽表示，父組件可以在這個(gè)占位符中填充任何模板代碼，比如HTML、組件等，填充的內(nèi)容會(huì)替換掉子組件的標(biāo)簽（替換占位符）。
默認(rèn)插槽
默認(rèn)插槽是最簡(jiǎn)單的一種插槽，和上面的描述一致，就是通過(guò)替換占位符達(dá)到在父組件中更改子組件中內(nèi)容的效果。
語(yǔ)法：
在子組件中放置一個(gè)占位符（slot）：
莎莎減肥
然后在父組件中引用這個(gè)子組件，并給這個(gè)占位符（slot）填充內(nèi)容：
今天吃啥：
大嫂不讓莎莎吃飯
這時(shí)頁(yè)面展現(xiàn)的內(nèi)容會(huì)是【今天吃啥：莎莎減肥大嫂不讓莎莎吃飯】。
具名插槽
比如在子組件中有兩個(gè)要替換占位符的地方（兩個(gè)slot），這時(shí)父組件如果要將相應(yīng)的內(nèi)容填充到相應(yīng)的插槽中，靠默認(rèn)插槽是沒(méi)有辦法判斷相應(yīng)的內(nèi)容要填充到哪個(gè)插槽中的。為了應(yīng)對(duì)這樣的場(chǎng)景，具名插槽應(yīng)運(yùn)而生。
具名插槽，其實(shí)就是給子組件中的插槽取一個(gè)名字，而父組件就可以在引用子組件的時(shí)候，根據(jù)這個(gè)名字對(duì)號(hào)入座，將相應(yīng)內(nèi)容填充到相應(yīng)的插槽中。
語(yǔ)法：
在子組件中放置兩個(gè)具名插槽：
第一個(gè)插槽
第二個(gè)插槽
在父組件中引用該子組件，并通過(guò)v-slot:[name]的方式將相應(yīng)的內(nèi)容填充到相應(yīng)的插槽中：
兩個(gè)插槽：
one，
two
這時(shí)頁(yè)面展示的內(nèi)容會(huì)是【兩個(gè)插槽：第一個(gè)插槽one，第二個(gè)插槽two】。
使用默認(rèn)插槽和具名插槽的注意事項(xiàng)
1.如果子組件中存在多個(gè)默認(rèn)插槽，那么父組件中所有指定到默認(rèn)插槽的填充內(nèi)容（未指定具名插槽），會(huì)全部填充到子組件的每個(gè)默認(rèn)插槽中。
2.即使在父組件中將具名插槽的填充順序打亂，只要具名插槽的名字對(duì)應(yīng)上了，填充的內(nèi)容就能被正確渲染到相應(yīng)的具名插槽中，一個(gè)蘿卜一個(gè)坑。
3.如果子組件中同時(shí)存在默認(rèn)插槽和具名插槽，但是在子組件中找不到父組件中指定的具名插槽，那么該內(nèi)容會(huì)被直接丟棄，而不會(huì)被填充到默認(rèn)插槽中。
作用域插槽
作用域插槽相比于前面的默認(rèn)插槽和具名插槽，會(huì)比較難于理解和運(yùn)用。
前面的兩個(gè)插槽強(qiáng)調(diào)的是填充占位的【位置】；
作用域插槽強(qiáng)調(diào)的則是數(shù)據(jù)作用的【范圍】；
作用域插槽，就是帶參數(shù)（數(shù)據(jù)）的插槽；
在子組件的插槽中帶入?yún)?shù)（數(shù)據(jù)）提供給父組件使用，該參數(shù)（數(shù)據(jù)）僅在插槽內(nèi)有效，父組件可以根據(jù)子組件中傳過(guò)來(lái)的插槽參數(shù)（數(shù)據(jù)）對(duì)展示內(nèi)容進(jìn)行定制。
語(yǔ)法：
在子組件中放置一個(gè)帶參數(shù)（數(shù)據(jù)）的插槽：
插槽中的參數(shù)值是
在父組件中引用該子組件，并通過(guò)slot-scope來(lái)接受子組件的插槽中傳過(guò)來(lái)的參數(shù)和使用該數(shù)據(jù)。
作用域插槽：
{{ isAllwo.isAllwo.one}}
這時(shí)頁(yè)面展示的內(nèi)容會(huì)是【作用域插槽：插槽中參數(shù)值是one】。
因?yàn)樵趖emplate的{{}}是支持表達(dá)式的，這個(gè)時(shí)候就可以利用子組件傳過(guò)來(lái)的參數(shù)值的不同進(jìn)行頁(yè)面內(nèi)容的定制。
作用域插槽：
{{ isAllwo.isAllwo.one|| '空值' }}
這時(shí)，如果子組件中傳過(guò)來(lái)的參數(shù)是空值，頁(yè)面的展示內(nèi)容就會(huì)是【作用域插槽：插槽中參數(shù)值是空值】。
作用域插槽的使用場(chǎng)景多種多樣，在各種框架中的應(yīng)用也是十分廣泛，比如ElementUI中的對(duì)表格的某一行或某一列進(jìn)行展示內(nèi)容的定制，就是作用域插槽的一個(gè)典型應(yīng)用場(chǎng)景。
到此，相信大家對(duì)“vue中有哪些插槽”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
本文名稱：vue中有哪些插槽
文章地址：
http://weahome.cn/article/jchgci.html
重慶分公司
重慶分公司
