今日筆記行瑞，slot插槽盖文，
我男朋友跟我說，學(xué)習(xí)一樣?xùn)|西朽缴，你需要給自己提三個問題沧侥，然后帶著這三個問題去研究可霎，
于是我給自己提了三個問題，
slot插槽是什么東西宴杀？slot插槽有什么用癣朗？slot插槽怎么用？
進(jìn)入學(xué)習(xí)：
<slot></slot> //此標(biāo)簽就是slot插槽旺罢。
當(dāng)你看到了如上標(biāo)簽旷余，就說明你轉(zhuǎn)角遇到slot插槽啦。
slot標(biāo)簽在子組件模板中插入使用扁达，可以將它理解為一個占位符正卧，在子組件模板中聲明了這么一個占位符，然后在父組件中引入此組件時跪解，便可以在子組件的開始標(biāo)簽和閉合標(biāo)簽之間填入內(nèi)容穗酥。
看代碼:（沒有slot）
可以看到，我在App組件里引入里HelloWorld組件，此時的HelloWorld組件模板里并沒有插入slot插槽砾跃，所以在父組件中引入的HelloWord組件開始標(biāo)簽和閉合標(biāo)簽之間的內(nèi)容（如此例子：“只有在當(dāng)前組件模板內(nèi)插入slot插槽才能顯示這段話”）沒有被顯示,只顯示了子組件模板中的內(nèi)容（如此例：“這是子組件HelloWorld”）骏啰。
代碼:（插入slot）
當(dāng)在子組件HelloWorld模板中插入slot插槽后，在父組件中引入的子組件標(biāo)簽之間的內(nèi)容就可以顯示出來了抽高。
如果你能看明白上面的代碼例子,那上面的三個問題就迎刃而解了吧,很簡單是不是.
-
question1:slot插槽是什么東西?
slot插槽就是<slot></slot>這個標(biāo)簽,相當(dāng)于占位符,在該組件中插入slot標(biāo)簽,這個時候父組件中引入的該組件的開始標(biāo)簽和結(jié)束標(biāo)簽之間就有一個插槽. -
question2:slot插槽有什么用?
只有當(dāng)你在組件模板中引入slot標(biāo)簽時,在父組件中引入的這個組件的標(biāo)簽內(nèi)的內(nèi)容才會被顯示出來.插槽內(nèi)可以包含任何模板代碼判耕，包括 HTML,也包括組件 -
question3:slot插槽怎么用?
如上例代碼,在組件模板內(nèi)部插入slot標(biāo)簽就可以啦.
好簡單啊~
但是slot并不是只有這么一點(diǎn)點(diǎn)內(nèi)容哦,
它還有編譯作用域,后備內(nèi)容,具名插槽,作用域插槽,動態(tài)插槽名...
編譯作用域
如果你想在插槽中使用data中的數(shù)據(jù)也是可以.
比如這樣:
由此可得，插槽中可以直接訪問當(dāng)前模板作用域翘骂。
提個問題壁熄，可以在App組件的HelloWorld組件標(biāo)簽中訪問得到HelloWorld組件中的數(shù)據(jù)msg嗎？
可以來試一下碳竟，將App組件中的{{message}}改為{{msg}}
運(yùn)行結(jié)果：
這里結(jié)果報錯為msg is not defined,說明不能訪問到HelloWorld模板中的數(shù)據(jù)草丧。
這里可以記住官網(wǎng)中的一條規(guī)則：
父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的莹桅。
那么如何能獲取得到子組件中的數(shù)據(jù)呢昌执？這里就需要涉及到作用域插槽的知識點(diǎn)了。這個后面再講~
后備內(nèi)容
后備內(nèi)容也很簡單诈泼，顧名思義懂拾，就是有一個備用的內(nèi)容，當(dāng)插槽中沒有內(nèi)容的時候铐达，就用這個后備內(nèi)容補(bǔ)上岖赋。用法：將后備內(nèi)容寫在該組件（子組件）的slot標(biāo)簽中的。
可以看看當(dāng)插槽中有數(shù)據(jù)的時候瓮孙，slot標(biāo)簽中的后備內(nèi)容還會不會被顯示出來
結(jié)果顯明：
子組件標(biāo)簽中的內(nèi)容把子組件模板中slot標(biāo)簽中的后備內(nèi)容替換了唐断。
具名插槽
具名插槽用于解決有多個slot插槽時，我們希望可以在指定位置顯示具體內(nèi)容的問題杭抠。
先來看看當(dāng)有多個slot標(biāo)簽時頁面運(yùn)行結(jié)果會是什么樣子的栗涂，
可以看出：子組件模板有多少個插槽，子組件標(biāo)簽內(nèi)的內(nèi)容就分別顯示多少次祈争。這肯定不是預(yù)期期望的結(jié)果斤程。
這個時候具名插槽就派上用場了。
<slot> 元素有一個特殊的特性：name菩混。這個特性可以用來定義額外的插槽
讓我們給slot標(biāo)簽加上name:
現(xiàn)在是不是就是預(yù)期效果啦忿墅。
然而...
Vue2.6.0 更新之后，這種用法已經(jīng)被廢棄沮峡。正確用法是用v-slot指令來代替(v-slot也和v-bind一樣有縮寫疚脐，縮寫符號為”#“)，并且只能在template標(biāo)簽上使用邢疙，用法如下：
現(xiàn)在 <template> 元素中的所有內(nèi)容都將會被傳入相應(yīng)的插槽棍弄。
總結(jié)：在向具名插槽提供內(nèi)容的時候望薄，我們需要在一個 <template> 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱
值得注意的是呼畸，沒有給name值的slot其實(shí)都有一個隱含的name:default,任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容痕支。
作用域插槽
終于講到作用域插槽了，
讓我們回顧一下編譯作用域蛮原，
此時App模板是訪問不到HelloWorld組件中的數(shù)據(jù)的卧须，但是還是有方法可以實(shí)現(xiàn)App訪問HelloWorld的數(shù)據(jù)的。
實(shí)現(xiàn)方法：
我們可以將 msg 作為 <slot> 元素的一個特性綁定上去：
<template>
<div>
<div>這是子組件HelloWorld</div>
<slot :msg="msg"></slot>
</div>
</template>
綁定在 <slot> 元素上的特性被稱為插槽 prop∪逶桑現(xiàn)在在父級作用域中花嘶，我們可以給 v-slot 帶一個值(此例為helloWorld,你也可以用別的名稱)來定義我們提供的插槽 prop 的名字：
<hello-world>
<template v-slot:default="helloWorld">訪問當(dāng)前組件的msg數(shù)據(jù)==={{helloWorld.msg}}</template>
</hello-world>
運(yùn)行結(jié)果：
你還可以這樣寫：
這個就是用到了解構(gòu)插槽的知識，可以參考官網(wǎng)蹦漠，已經(jīng)講的很清楚了解構(gòu)插槽 Prop
本文為自己的學(xué)習(xí)筆記椭员，感覺講的有點(diǎn)亂，不過官方文檔其實(shí)已經(jīng)講的很詳細(xì)了笛园，看不懂的同學(xué)可以多看幾遍官方文檔隘击。
