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