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