在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。

引vue官方文檔

之前做項目時,對插槽理解太少了,這兩天學習時,才發(fā)現(xiàn)插槽更新用v-slot了,自己做了些簡單總結(jié),與大家分享一下~

插槽

我的理解就是父頁面在組件標簽內(nèi)插入任意內(nèi)容,子組件內(nèi)插糟slot控制擺放位置(匿名插槽,具名插槽)

插槽分類

插槽一共就三大類
1.匿名插槽(也叫默認插槽): 沒有命名,有且只有一個
2.具名插槽: 相對匿名插槽組件slot標簽帶name命名的
3.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁面拿到(解決了數(shù)據(jù)只能從父頁面?zhèn)鬟f給子組件)

匿名插槽(也叫默認插槽default)

用法:我的理解,匿名插糟只需要一個.(就是這些,不太復雜)

父頁面:

 <todo-list>     <template v-slot:default>       任意內(nèi)容       <p>我是匿名插槽 </p>    </template></todo-list>  //v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫

子組件 todoList.vue

<slot>我是默認值</slot>##顯示##// 任意內(nèi)容// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比較,就是必須起名todo對應,可以有多個具名插槽.(沒了~)

父頁面

 <todo-list>     <template v-slot:todo>       任意內(nèi)容       <p>我是匿名插槽 </p>    </template></todo-list> // tododata() {   return {    dynamicSlotName:"todo"    } },

子組件

<slot name="todo">我是默認值</slot>##顯示##// 任意內(nèi)容// 我是匿名插槽

對 v-slot:todo 做操作:

動態(tài)命名

v-slot:{dynamicSlotName}//替換標簽上 v-slot:todo

具名插槽縮寫(匿名插槽用法)(可以后看)

#todo 替換標簽上 v-slot:todo

匿名如果想用必須加上default

#default 替換標簽上 v-slot:todo

父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。

作用域插槽

1.重點是slotProps接取子組件里:user="user" :test="test"類似屬性的數(shù)據(jù)

父頁面

<todo-list> <template v-slot:todo="slotProps" >   {{slotProps.user.firstName}} </template> </todo-list> //slotProps 可以隨意命名//slotProps 接取的是子組件標簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"