vue複習筆記 slot

2021-09-29 01:10:37 字數 2130 閱讀 3533

快節奏的工作過程中,發現很久沒有梳理過vue的基礎知識了,知識好多都遺忘或者模糊了。準備空閒的時候一點點的捋一下吧。只針對自己模糊或者遺忘的點記錄下:

一、slot插槽

slot屬性(不是標籤)在2.6以後已經遺棄,改用v-slot指令支援了,只記錄下v-slot的基本用法,詳情還是看官方文件。slot具體幹啥的就不贅述了,簡單來說就是用來定製元件的檢視內容的一種機制。元件,通常來說包含大量的公共邏輯和檢視,以達到復用的目的。但是不可避免業務中會有通用邏輯、檢視無法解決的情況,這個時候需要自定義的能力,slot在這個方面有著很重要的作用,對元件的可拓展性、通用性起著非常重要的作用。

開始之前要理清楚slot使用的基本機制。首先要認清其本質其實是一種父子元件通訊方式而已,既然是一種通訊(互動、傳值相似的叫法反正就這個意思啦),無非就兩種方式而已:父傳子,子傳父。下面按這個維度來記憶或者理解好一些。

1、基本用法

(1)父傳子:

子元件(testslot):

origin text

父元件:

test header

test footer

效果:

這裡幾個知識點一起揉在一起了。就不從什麼預設插槽、單個插槽這種概念開始了,單個、預設插槽也只是多插槽的一種特殊情況。直接一點:

1、子元件中,使用slot標籤佔位,在可能需要被自定義檢視的位置寫上slot標籤,這個位置可以理解成,是將來會被父元件傳入的「值(模板)」替換的位置。

2、子元件中,slot標籤由name屬性唯一標識,不寫name預設為「default」。

3、slot標籤中間可以寫入預設的html內容,這些內容將作為預設的檢視渲染,即父元件沒有傳入值替換該slot時,就渲染slot標籤中間的html,如上面的預設slot。

4、父元件中,在呼叫的子元件標籤中間,使用template標籤寫入自定義的內容,在template標籤上使用v-slot指令指定當前template標籤下所有內容要替換的,子元件中的slot。這裡的v-slot冒號後跟的,就是子元件中你要替換的slot的name屬性值。比如我這裡用test header文字替換了testslot元件中的。

5、父元件中,v-slot指令可以簡化用#代替,v-slot:header=#header

父傳子基本的知識點差不多了,簡單總結下,就是子元件中通過slot標籤預定義好要自動化的位置(這也是插槽名字的由來吧),父元件呼叫時,可在子元件標籤中間寫自己的檢視,通過v-slot指令指定這些檢視要在子元件中插入的位置。這個動作由父元件自動呼叫觸發,所以我們理解為父傳子。

(2)子傳父

子元件:

origin text

父元件:

test header:}

test footer:}

效果:

可以看到上面子傳父,相對父傳子,在子元件中:

1、slot標籤上,除了name屬性,多了header屬性,這個屬性還是通過v-bind繫結的,值是子元件中的data屬性中的值。

父元件中:

1、使用template定義自定義檢視時,template標籤上,v-slot指令多了等號和等號後面的值。

控制變數法,這兩個改動的點就是子傳父的用法啦,即子元件通過直接在slot標籤上指定要傳遞引數的名字和值,父元件通過v-slot指令等號後的物件獲取子元件傳過來的值。

這個動作由子元件通過在slot上使用v-bind屬性來觸發。父元件中接受子元件中傳遞的引數來渲染template,知識點:

1、子元件中,slot上可以直接通過v-bind繫結要傳遞給父元件的key和value。

2、父元件中,通過v-slot指定可直接獲取傳遞過來的引數,並用於template渲染。

3、父元件中可通過#和{}語法簡化呼叫。

基本用法先就寫這麼多辣。個人認為slot結合jsx,可以實現非常靈活、通用性、易用性、拓展性都極好的元件。具體實現,後續有時間再更新啦。

Vue筆記 slot插槽

元件的插槽是為了讓封裝的元件有更好的擴充套件性,讓使用者決定要展示什麼東西 元件模板 cpn 我是cpnh2 slot div template html 中運用元件,並將不同的內容放入插槽 type button 確定button cpn 哈哈哈哈哈哈span cpn 呵呵呵呵呵呵span cpn...

Vue筆記(四) 插槽(slot)

插槽 slot 用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。示例 1239 1011 1314 15for item in items v bind list item 1617 1819 2021 2252 5354 55 在上面的 中,todo的...

Vue學習筆記 元件的插槽slot

插槽slot 子元件中加入標籤,父元件呼叫子元件時,雙標籤的內容,就會複製到slot中 template 插槽slot 插槽中使用子元件 父元件使用slot時,可以使用其他子元件 插槽中使用資料項 父元件使用slot時,可以使用資料項 動態資料 父元件模板裡呼叫的資料屬性,使用的都是父元件裡的資料 ...