摘要:它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí),組件的標(biāo)簽才可以被當(dāng)作插槽的模板來(lái)使用。如下,讓后備內(nèi)容默認(rèn)內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。
最近忙著寫一些組件,關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope,然后看了一下文檔的更新,于是又重新把“插槽”學(xué)習(xí)了一篇,下面一段是文檔中的說(shuō)明:
在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語(yǔ)法的由來(lái)可查閱這份 RFC。
插槽,也就是slot,slot就是子組件里的一個(gè)占位符,一個(gè)slot的核心問(wèn)題,就是顯不顯示,顯示的話顯示話,該如何去展示出來(lái),這是由父組件所控制的,但是插槽顯示的位置是由子組件自己所決定的,slot寫在組件template的什么位置,父組件傳過(guò)來(lái)的模板將會(huì)顯示在什么位置。
這是一個(gè)子組件,我們使用了默認(rèn)插槽(匿名插槽),父組件的內(nèi)容將會(huì)代替
// 使用children組件代替slot的內(nèi)容
渲染后的結(jié)果
代替slot的內(nèi)容
自 2.6.0 起有所更新。已廢棄的使用 slot 特性的語(yǔ)法在這里。
有時(shí)我們一個(gè)組件里面需要多個(gè)插槽。我們?cè)趺磥?lái)區(qū)分多個(gè)slot,而且不同slot的顯示位置也是有差異的.對(duì)于這樣的情況,
注意:一個(gè)不帶 name 的
如下面一個(gè)組件,需要多個(gè)插槽。如何向組件提供內(nèi)容呢?
在向具名插槽提供內(nèi)容的時(shí)候,我們可以在一個(gè) 元素上使用 v-slot 指令,并以 v-slot 的參數(shù)的形式提供其名稱:
Here might be a page title
A paragraph for the main content.
And another one.
Here might be a page title
A paragraph for the main content.
And another one.
渲染后的結(jié)果
Here might be a page title
A paragraph for the main content.
And another one.
注意:v-slot 只能添加在一個(gè) 上 (只有一種例外情況),這一點(diǎn)和已經(jīng)廢棄的 slot特性不同。
例外情況: 當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí),組件的標(biāo)簽才可以被當(dāng)作插槽的模板來(lái)使用。這樣我們就可以把 v-slot 直接用在組件上:
自 2.6.0 起有所更新。已廢棄的使用 slot-scope 特性的語(yǔ)法在這里。
有時(shí)候,插槽的內(nèi)容中有需要訪問(wèn)到子組件里面的內(nèi)容,類似子組件里的slot可以綁定一些當(dāng)前作用域,從而傳出來(lái),使用組件時(shí),插槽的內(nèi)容就可以拿到slot傳出來(lái)的數(shù)據(jù),父級(jí)的插槽內(nèi)容可用。
如下,讓后備內(nèi)容(slot默認(rèn)內(nèi)容)user.firstName 替換正常情況下的user.lastName
{{ user.lastName}}
綁定在
// slot綁定了當(dāng)前作用域下user對(duì)象
// 為什slot中還有內(nèi)容呢?不是由插槽內(nèi)容填充嗎?在slot中有內(nèi)容,我們可以稱之為后備內(nèi)容,
就是slot的默認(rèn)內(nèi)容,但我們使用這個(gè)插槽時(shí),卻沒(méi)有內(nèi)容填充,就會(huì)顯示其默認(rèn)的內(nèi)容。
{{ user.lastName }}
在父級(jí)作用域中,我們可以給 v-slot 帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字,slotProps可以任意命名的,通過(guò)slotProps.use就拿到了子組件slot傳出來(lái)的對(duì)象。
{{ slotProps.user.firstName }} {{ slotProps.user.firstName }}
在上述情況下,當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí),這樣我們就可以把 v-slot 直接用在組件上:
{{ slotProps.user.firstName }} // default可以省略,默認(rèn)插槽的縮寫語(yǔ)法{{ slotProps.user.firstName }} {{ user.firstName }} {{ person.firstName }}
注意:默認(rèn)插槽的縮寫語(yǔ)法不能和具名插槽混用,因?yàn)樗鼤?huì)導(dǎo)致作用域不明確,只要出現(xiàn)多個(gè)插槽,請(qǐng)始終為所有的插槽使用完整的基于 的語(yǔ)法
什么是后備內(nèi)容呢,一個(gè)slot有它的默認(rèn)的內(nèi)容,有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的,它只會(huì)在沒(méi)有提供內(nèi)容的時(shí)候被渲染。
這里只是簡(jiǎn)單描述了幾個(gè)關(guān)鍵點(diǎn),其實(shí)還有很多可擴(kuò)展的,或其他特性,我們還是需要多去看文檔,多學(xué)習(xí)。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/105359.html
摘要:它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí),組件的標(biāo)簽才可以被當(dāng)作插槽的模板來(lái)使用。如下,讓后備內(nèi)容默認(rèn)內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件,關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope,然后看了一下文檔的更新,于是又重新把插槽學(xué)習(xí)了一篇,下面一段是文檔中的說(shuō)明: 在 2.6.0 中...
摘要:在中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法即指令。它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語(yǔ)法的由來(lái)可查閱。 在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語(yǔ)法的由來(lái)可查閱 RFC。 引vue官方文檔之前...
摘要:網(wǎng)絡(luò)上大多數(shù)文章,也是千篇一律的翻譯這句話,可是僅憑這一句話,我想象不到的使用場(chǎng)景。因?yàn)檎嬲氖褂脠?chǎng)景下,子組件的數(shù)據(jù)都是來(lái)自父組件的。組件的數(shù)據(jù)都是來(lái)自調(diào)用者的,然后會(huì)把每一行的,在開發(fā)者需要時(shí),傳遞出去。 Vue的slot-scope的場(chǎng)景的個(gè)人理解 這篇文章不是單純把文檔的話和api拿來(lái)翻譯和演示,而是談?wù)勎覍?duì)于slot-scope的使用場(chǎng)景的個(gè)人理解,如果理解錯(cuò)誤,歡迎討論! ...
摘要:具名插槽可以在一個(gè)組件中出現(xiàn)次。出現(xiàn)在不同的位置。這個(gè)稍微難理解一點(diǎn)。使用非常方便,是基于搭建工程。地址點(diǎn)這里最后如果本文對(duì)你理解和有幫助,請(qǐng)不要吝嗇手中的點(diǎn)贊喲。 作者/云荒杯傾 寫在前面 vue中關(guān)于插槽的文檔說(shuō)明很短,語(yǔ)言又寫的很凝練,再加上其和methods,data,computed等常用選項(xiàng)使用頻率、使用先后上的差別,這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生算了吧,回頭再...
閱讀 2069·2021-09-22 15:43
閱讀 8734·2021-09-22 15:07
閱讀 1085·2021-09-03 10:28
閱讀 2059·2021-08-19 10:57
閱讀 1071·2020-01-08 12:18
閱讀 2978·2019-08-29 15:09
閱讀 1530·2019-08-29 14:05
閱讀 1645·2019-08-29 13:57