Slot 具名插槽的使用

2021-10-12 06:27:06 字數 646 閱讀 7958

在我們使用插槽的時候,可能裡面會有多個插槽,這個時候也可以定義多個插槽

比如在元件中定義三個插槽,而我只想把標題放在中間,只呼叫中間的插槽的話該怎麼辦。

有的人可能會說直接引用不就好了,這種肯定不行,這樣三個都替換掉了。如下右邊的三個就可以看出來,要換的話就全部換掉了,達不到想要的結果

當我們想替換其中乙個的時候,我們就可以給插槽取乙個名字,下面這種元件裡面的沒有帶上名字就只能替換沒有帶名字的插槽。如下就可以看出,我們引用的標題沒有帶名字就只能把預設的哈哈哈替換掉。

而想要替換有名字的就要給標籤取名字,告訴插槽我要替換的是哪個。如下標籤就會把name是center的中間替換掉,就會把name為left的插槽替換掉

了解具名插槽之後就可以通過這種方法封裝很多的元件。

當我們要引用多個插槽的時候,可以在引用的標籤裡面加上name這樣用於區分引用的是哪乙個。

slot插槽以及具名插槽

今天剛入職新公司,看了新公司的專案 感覺和之前自己做的專案還是有差距的。自己之前做的專案相對於新公司來說可能還是偏淺,所以無論是框架還是原生的js都要去更加深入的了解才能應對之後的專案。都知道vue元件可以通過slot插槽插入自定義的資訊,但是往更加深入的slot了解的話會發現,slot插槽也有其他...

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

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

slot插槽的使用

先來簡單說明一下我需要實現的功能,用的是iview的 元件,然後呼叫後端介面實現資料的展示,在這裡遇到乙個問題,就是在等級展示這裡有點問題,因為後端傳給我的是1 2 3的數字,但是我需要展示在頁面上的是1 2 3所代表的的含義,一級 二級 具體實現方法如下 data 在模板裡面加入如下內容 slot...