slot插槽以及具名插槽

2021-09-26 08:25:13 字數 580 閱讀 8407

今天剛入職新公司,看了新公司的專案**感覺和之前自己做的專案還是有差距的。自己之前做的專案相對於新公司來說可能還是偏淺,所以無論是框架還是原生的js都要去更加深入的了解才能應對之後的專案。

都知道vue元件可以通過slot插槽插入自定義的資訊,但是往更加深入的slot了解的話會發現,slot插槽也有其他更加複雜的場景。

具名插槽就是其中的乙個。

具名插槽可以讓你可以自定義多處元件中可以插入內容的地方,這對複雜的元件來說誰十分有用的。這邊直接上**了

子元件

slot1

slot2

slot3

父元件

你好1

你好2你好3

子元件通過slot標籤定義name屬性,然後父元件通過slot屬性對應子元件的slot標籤的name,這樣就能在元件相應的位置插入需要的資訊了。

新的公司對我來說是乙個挑戰,也是乙個機會這次我要專心的當好我的小兵。期待不就得將來彎道超車!!!加油!!!

Vue插槽slot 預設插槽 具名插槽 作用域插槽

1.什麼插槽 插槽也成為內容分發 用slot這個內建元件 2.插槽是幹什麼的 在子元件中來顯示父元件中的資料 3.插槽怎麼用 4.在子元件中用括起來乙個區域 5.在父元件的子元件標籤中給插槽傳遞資料,如果父元件不傳輸資料那6.麼直接顯示標籤中的資料 7.插槽的分類 插槽可以分為三類 預設插槽 具名插...

Slot 具名插槽的使用

在我們使用插槽的時候,可能裡面會有多個插槽,這個時候也可以定義多個插槽 比如在元件中定義三個插槽,而我只想把標題放在中間,只呼叫中間的插槽的話該怎麼辦。有的人可能會說直接引用不就好了,這種肯定不行,這樣三個都替換掉了。如下右邊的三個就可以看出來,要換的話就全部換掉了,達不到想要的結果 當我們想替換其...

插槽 具名插槽 作用域插槽

一 插槽 當子元件的有一部分內容是根據父元件傳過來的dom顯示的時候,可以使用插槽 通過插槽,父元件向子元件優雅的傳遞dom結構,同時子元件使用插槽的內容,通過 body well 二 具名插槽 slot header header slot footer footer 三 作用域插槽 作用域插槽 ...