玩轉vue的slot內容分發(fā)
vue的內容分發(fā)非常適合“固定部分+動態(tài)部分”的組件的場景，固定部分可以是結構固定，也可以是邏輯固定，比如下拉loading，下拉loading只是中間內容是動態(tài)的，而拉到底部都會觸發(fā)拉取更多內容的操作，因此我們可以把下拉loading做成一個有slot的插件。
單個Slot
在children這個標簽里面放Dom，Vue不會理你，也就是不會顯示，類似React：this.props.children。
//父
<children>
<span>12345</span>//這邊不會顯示
</children>
//子
components: {
children: {
template: "<button>為了明確作用范圍，所以使用button標簽</button>"
}
}
你需要寫成這樣
children: {
template: "<button><slot></slot>為了明確作用范圍，所以使用button標簽</button>"
}
注意這邊 slot 相當于一個坑，等著父組件給填上，這邊 slot 代表的就是上面的 span
多個Slot
這邊需要加name屬性，說白了，多個Slot就不像上面單個，需要有個對應關系。
父-> slot="name1"
子-> <slot name="name1"
//父
<children>
<span slot="name1">12345</span>
</children>
//子
components: {
children: {
template: "<button>
<slot name="name1"></slot>
button標簽
</button>"
}
}
這邊寫了一個name1，如果有多個，就插多個，比較簡單。
使用場景
“下拉加載更多”的場景在移動端相對來說出現(xiàn)得比較多。我們知道下拉觸底都要監(jiān)聽觸底事件，觸底的操作也相同（去后臺拉取數據），分頁算法也相同，因此我們會想到把它做成一個組件，重用這些相同的地方，讓其他地方可以共用這個組件，從而減少代碼量。
然而，下拉loading并不是一個可以完全重用的組件，因為列表里面的內容不同，空白頁（沒有內容時）的內容也可能不同，如果要做成組件，那么就要考慮到這方面的“不同”，因此我們想到利用vue的內容分發(fā)slot來做。下面是本人在開發(fā)的時候做的一個下拉loading，大家可以參考下。
組件代碼：
<template>
<div>
<slot name="list" v-if="total > 0"></slot>
<slot name="empty" v-else></slot>
</div>
</template>
<script>
import Toast from 'lib/xl-toast'
import Tool from 'tool/tool'
export default {
data() {
return {
page: 1,
isLoading: false,
busy: false,
isFirstLoad: false
}
},
props: {
pageSize: {
default: 10 // 每頁展示多少條數據
},
total: {
default: 0 // 總共多少條記錄
}
},
computed: {
totalPage() {
return Math.ceil(this.total / this.pageSize)
}
},
created() {
this.getList()
},
mounted() {
this.addScrollListener()
},
methods: {
addScrollListener() {
// 添加監(jiān)聽滾動操作，用到函數防抖
this.scrollFn = Tool.throttle(this.onScroll, 30, 30)
document.addEventListener('scroll', this.scrollFn, false)
},
getList() {
// 正在拉取數據或者沒有數據了，則取消滾動監(jiān)聽
if(this.isLoading || this.isFirstLoad && (this.page > this.totalPage)) {
document.removeEventListener('scroll', this.scrollFn, false)
return
}
this.busy = true
this.isLoading = true
// 通知父組件去拉取更多數據
this.$emit("getList", this.page, () => {
this.isFirstLoad = true
this.isLoading = false
this.page++
}, () => {
Toast.show('網絡錯誤，請稍后重試')
this.total = 0
this.isLoading = false
})
},
reset() {
// 重新拉取數據
this.page = 1
this.total = 0
this.isLoading = false
this.isFirstLoad = false
this.addScrollListener()
this.getList()
},
onScroll() {
// 到底拉取更多數據
if(Tool.touchBottom()) {
this.getList()
}
}
}
}
</script>
總之，遇到一些有想對比較固定的部分，包括js操作或者結構固定，又有一些動態(tài)的部分，我們應該就應該考慮到使用：組件+slot。
意向不到的slot另類用法
我在做需求的時候，做了一個組件，該組件分為上下兩個部分，這兩個部分耦合度很高（不然我怎么把它當成一個組件呢哈哈哈），如下圖所示：
本來C區(qū)域是一個組件，然后產品突然說，需要把這兩個部分分開，把A移到C1的位置，C1移到A的位置（心里感覺到憋屈）。
這里我的第一個想法就是拆開來做成兩個組件，但是問題來了，之前這兩部分的耦合度很高，如果強制把它拆開成兩個組件，那么這兩個組件之間的交互必然會多很多。比如，C1改變了某個東西會影響到C2，那么C1需要觸發(fā)事件通知父組件，父組件再調用C2的某個方法來更新狀態(tài)。這種跨組件之間的通訊在組件之間頻繁交互的情況下，將會是噩夢，而我這邊卻需要頻繁的交互，所以如果把它拆分為兩個組件，那么工作量和復雜度將會大大的增加。當然，你可以想到通過Event Hub的方式來實現(xiàn)兩個組件之間的交互，但是根本問題還是沒有實質性得得到解決。
那么，有什么方法可以做到不拆分成兩個組件又能移動位置的方法呢，答案就是slot。以我的例子為例，把A和B作為C的內容分發(fā)，原來是這樣的:
<A></A> <B></B> <C></C>
改為slot以后是這樣的
<C> <A slot="c1"></A> <B slot="c2"></B> </C>
這樣就能做到不把C模塊拆分，又能調整位置了，以最小的代價完成需求~~。
總結
vue的slot不僅可以用來內容分發(fā)，還可以用來做位置調整。如果在需要拆分組件來做位置調整，又不想因為拆分耦合度很高的組件，可以考慮使用slot來進行位置調整。一點愚見，希望對大家有所幫助。也希望大家多多支持腳本之家。
相關文章
本篇文章將會嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關的面試題時可以和面試官談笑風生,文中有相關的圖解和代碼示例,感興趣的同學跟著小編一起來看看吧2023-08-08
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05
vue3 provide和inject底層組件的值不是響應式的處理詳解
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能,基于一個新建的Vue3項目上實現(xiàn)，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01
vue項目中使用particles實現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點擊響應)
為了提高頁面展示效果，登錄界面內容比較單一的，粒子效果作為背景經常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享在實現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02
Vue3中Provide?/?Inject的實現(xiàn)原理分享
provide和inject主要為高階插件/組件庫提供用例,這篇文章主要給大家介紹了關于Vue3中Provide?/?Inject的實現(xiàn)原理,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了深入解讀VUE中的異步渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章給大家分享了vue.js刪除列表中的一行的實例操作以及代碼分享，有興趣的朋友參考下。2018-06-06
Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue.js iview打包上線后字體圖標不顯示解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01