玩轉vue的slot內容分發

2022-07-17 10:33:13 字數 1729 閱讀 7208

單個slot

在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react:this.props.children。

//父

12345//這邊不會顯示

//子components:

}

你需要寫成這樣

children:
注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代表的就是上面的 span

多個slot

這邊需要加name屬性,說白了,多個slot就不像上面單個,需要有個對應關係。

父-> slot="name1"

子->

12345

//子components:

}這邊寫了乙個name1,如果有多個,就插多個,比較簡單。

使用場景「下拉載入更多」的場景在移動端相對來說出現得比較多。我們知道下拉觸底都要監聽觸底事件,觸底的操作也相同(去後台拉取資料),分頁演算法也相同,因此我們會想到把它做成乙個元件,重用這些相同的地方,讓其他地方可以共用這個元件,從而減少**量。

然而,下拉loading並不是乙個可以完全重用的元件,因為列表裡面的內容不同,空白頁(沒有內容時)的內容也可能不同,如果要做成元件,那麼就要考慮到這方面的「不同」,因此我們想到利用vue的內容分發slot來做。下面是本人在開發的時候做的乙個下拉loading,大家可以參考下。

元件**:

0">   

總之,遇到一些有想對比較固定的部分,包括js操作或者結構固定,又有一些動態的部分,我們應該就應該考慮到使用:元件+slot。

意向不到的slot另類用法

我在做需求的時候,做了乙個元件,該元件分為上下兩個部分,這兩個部分耦合度很高(不然我怎麼把它當成乙個元件呢哈哈哈),如下圖所示:

本來c區域是乙個元件,然後產品突然說,需要把這兩個部分分開,把a移到c1的位置,c1移到a的位置(心裡感覺到憋屈)。

這裡我的第乙個想法就是拆開來做成兩個元件,但是問題來了,之前這兩部分的耦合度很高,如果強制把它拆開成兩個元件,那麼這兩個元件之間的互動必然會多很多。比如,c1改變了某個東西會影響到c2,那麼c1需要觸發事件通知父元件,父元件再呼叫c2的某個方法來更新狀態。這種跨元件之間的通訊在元件之間頻繁互動的情況下,將會是噩夢,而我這邊卻需要頻繁的互動,所以如果把它拆分為兩個元件,那麼工作量和複雜度將會大大的增加。當然,你可以想到通過event hub的方式來實現兩個元件之間的互動,但是根本問題還是沒有實質性得得到解決。

那麼,有什麼方法可以做到不拆分成兩個元件又能移動位置的方法呢,答案就是slot。以我的例子為例,把a和b作為c的內容分發,原來是這樣的:

改為slot以後是這樣的

這樣就能做到不把c模組拆分,又能調整位置了,以最小的代價完成需求~~。

總結

vue的slot不僅可以用來內容分發,還可以用來做位置調整。如果在需要拆分元件來做位置調整,又不想因為拆分耦合度很高的元件,可以考慮使用slot來進行位置調整。一點愚見,希望對大家有所幫助。

玩轉vue的slot內容分發

單個slot 在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代...

Vue之slot內容分發

內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示,就是slot分發負責的活。可以將父元件放在子元件的內容,放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...

vue元件 使用插槽分發內容 slot

官網api 使用插槽分發內容 使用元件時,有時子元件不知道會收到什麼內容,這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...