您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue如何實(shí)現(xiàn)一個可復(fù)用組件”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue如何實(shí)現(xiàn)一個可復(fù)用組件”吧!
構(gòu)成組件
組件,是一個具有一定功能,且不同組件間功能相對獨(dú)立的模塊。組件可以是一個按鈕、一個輸入框、一個視頻播放器等等。
可復(fù)用組件,高內(nèi)聚、低耦合。
那么,什么構(gòu)成了組件呢。以瀏覽器的原生組件 video 為例,分析一下組件的組成部分。
<video src="example.mp4" width="320" height="240" onload="loadHandler" onerror="errorHandler"> Your browser does not support the video tag. </video>
實(shí)例中能看出,組件由狀態(tài)、事件和嵌套的片斷組成。狀態(tài),是組件當(dāng)前的某些數(shù)據(jù)或?qū)傩?,?video 中的 src、width 和 height。事件,是組件在特定時機(jī)觸發(fā)一些操作的行為,如 video 在視頻資源加載成果或失敗時會觸發(fā)對應(yīng)的事件來執(zhí)行處理。片段,指的是嵌套在組件標(biāo)簽中的內(nèi)容,該內(nèi)容會在某些條件下展現(xiàn)出來,如在瀏覽器不支持 video 標(biāo)簽時顯示提示信息。
在 Vue 組件中,狀態(tài)稱為 props,事件稱為 events,片段稱為 slots。組件的構(gòu)成部分也可以理解為組件對外的接口。良好的可復(fù)用組件應(yīng)當(dāng)定義一個清晰的公開接口。
Props 允許外部環(huán)境傳遞數(shù)據(jù)給組件
Events 允許組件觸發(fā)外部環(huán)境的副作用
Slots 允許外部環(huán)境將額外的內(nèi)容組合在組件中。
使用 vue 對 video 組件做拓展,構(gòu)造出一個支持播放列表的組件 myVideo:
<my-video :playlist="playlist" width="320" height="240" @load="loadHandler" @error="errorHandler" @playnext="nextHandler" @playprev="prevHandler"> <div slot="endpage"></div> </my-video>
myVideo 組件有著清晰的接口,接收播放列表、播放器寬高等狀態(tài),能夠觸發(fā)加載成功或失敗、播放上一個或下一個的事件,并且能自定義播放結(jié)束時的尾頁,可用于插入廣告或顯示下一個視頻信息。
組件間通信
在 Vue.js 中,父子組件的關(guān)系可以總結(jié)為 props down, events up 。父組件通過 props 向下傳遞數(shù)據(jù)給子組件,子組件通過 events 給父組件發(fā)送消息。
業(yè)務(wù)無關(guān)
命名
組件的命名應(yīng)該跟業(yè)務(wù)無關(guān)。應(yīng)該依據(jù)組件的功能為組件命名。
例如,一個展示公司部門的列表,把每一項作為一個組件,并命名為 DepartmentItem。這時,有一個需求要展示團(tuán)隊人員列表,樣式跟剛剛的部門列表一樣。顯然,DepartmentItem 這個名字就不適合了。
因此,可復(fù)用組件在命名上應(yīng)避免跟業(yè)務(wù)扯上關(guān)系,以組件的角色、功能對其命名。Item、ListItem、Cell??梢詤⒖?Bootstrap、ElementUI 等一些 UI 框架的命名。
業(yè)務(wù)數(shù)據(jù)無關(guān)
可復(fù)用組件只負(fù)責(zé) UI 上的展示和一些交互以及動畫,如何獲取數(shù)據(jù)跟它無關(guān),因此不要在組件內(nèi)部去獲取數(shù)據(jù),以及任何與服務(wù)端打交道的操作??蓮?fù)用組件只實(shí)現(xiàn) UI 相關(guān)的功能。
組件職責(zé)
約束好組件的職責(zé),能讓組件更好地解耦,知道什么功能是組件實(shí)現(xiàn)的,什么功能不需要實(shí)現(xiàn)。
組件可以分為通用組件(可復(fù)用組件)和業(yè)務(wù)組件(一次性組件)。
可復(fù)用組件實(shí)現(xiàn)通用的功能(不會因組件使用的位置、場景而變化):
UI 的展示
與用戶的交互(事件)
動畫效果
業(yè)務(wù)組件實(shí)現(xiàn)偏業(yè)務(wù)化的功能:
獲取數(shù)據(jù)
和 vuex 相關(guān)的操作
埋點(diǎn)
引用可復(fù)用組件
可復(fù)用組件應(yīng)盡量減少對外部條件的依賴,所有與 vuex 相關(guān)的操作都不應(yīng)在可復(fù)用組件中出現(xiàn)。
組件應(yīng)當(dāng)避免對其父組件的依賴,不要通過 this.$parent 來操作父組件的示例。父組件也不要通過 this.$children 來引用子組件的示例,而是通過子組件的接口與之交互。
命名空間
可復(fù)用組件除了定義一個清晰的公開接口外,還需要有命名空間。命名空間可以避免與瀏覽器保留標(biāo)簽和其他組件的沖突。特別是當(dāng)項目引用外部 UI 組件或組件遷移到其他項目時,命名空間可以避免很多命名沖突的問題。
<xl-button></xl-button> <xl-table></xl-table> <xl-dialog></xl-dialog> ...
業(yè)務(wù)組件也可以有命令空間,跟通用組件區(qū)分開。這里用 st (section) 來代表業(yè)務(wù)組件。
<st-recommend></st-recommend> <st-qq-movie></st-qq-movie> <st-sohu-series></st-sohu-series>
上下文無關(guān)
還是上面那句話,可復(fù)用組件應(yīng)盡量減少對外部條件的依賴。沒有特別需求且單個組件不至于過重的的前提下,不要把一個有獨(dú)立功能的組件拆分成若干個小組件。
<table-wrapper> <table-header slot="header" :headers="exampleHeader"></table-header> <table-body slot="body" :body-content="exampleContents"></table-body> </table-wrapper>
TableHeader 組件和 TableBody 組件依賴當(dāng)前的上下文,即 TableWrapper 組件嵌套的環(huán)境下。你可以有更好的解決辦法:
<xl-table :headers="exampleHeader" :body-content="exampleContents"></xl-table>
上下文無關(guān)原則能夠降低組件使用的門檻。
數(shù)據(jù)扁平化
定義組件接口時,盡量不要將整個對象作為一個 prop 傳進(jìn)來。
<!-- 反例 --> <card :item="{ title: item.name, description: item.desc, poster: item.img }></card>
每個 prop 應(yīng)該是一個簡單類型的數(shù)據(jù)。這樣做有下列幾點(diǎn)好處:
組件接口清晰
props 校驗方便
當(dāng)服務(wù)端返回的對象中的 key 名稱與組件接口不一樣時,不需要重新構(gòu)造一個對象
<card :title="item.name" :description="item.desc" :poster="item.img"> </card>
扁平化的 props 能讓我們更直觀地理解組件的接口。
使用自定義事件實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
有時候,對于一個狀態(tài),需要同時從組件內(nèi)部和組件外部去改變它。
例如,模態(tài)框的顯示和隱藏,父組件可以初始化模態(tài)框的顯示,模態(tài)框組件內(nèi)部的關(guān)閉按鈕可以讓其隱藏。一個好的辦法是,使用自定義事件改變父組件中的值:
<modal :show="show" @showchange="show = argument[0]"></modal>
<!-- Modal.vue --> <template> <div v-show="show"> <h4>標(biāo)題</h4> <p>內(nèi)容</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="close">關(guān)閉</a> </div> </template> <script> export default { props: { show: String }, methods: { close () { this.$emit('input', false) } } } </script>
用戶點(diǎn)擊關(guān)閉按鈕時,Modal 組件發(fā)送一個 input 自定義事件給父組件。父組件監(jiān)聽到 input 事件時,把 show 設(shè)置為事件回調(diào)的第一個參數(shù)。
特別地,當(dāng)狀態(tài)名稱為 value,事件名稱為 input 時,可以使用 v-model 指令語法糖:
<modal :value="show" @input="show = argument[0]"></modal>
等價于
<modal v-model="show"></model>
要讓組件的 v-model 生效,它必須:
接受一個 value 屬性
在有新的 value 時觸發(fā) input 事件
注意:由于每個組件的 input 事件只能用來對一個數(shù)據(jù)進(jìn)行雙向綁定,所以當(dāng)存在多個需要向上同步的數(shù)據(jù)時,請不要使用 v-model,請使用多個自定義事件,并在父組件中同步新的值。
<modal :show="show" @showchange="show = argument[0]" :content="content" @contentchange="content = argument[0]"> </model>
使用自定義 watcher 優(yōu)化 DOM 操作
在開發(fā)中,有些邏輯無法使用數(shù)據(jù)綁定,無法避免需要對 DOM 的操作。例如,視頻的播放需要同步 Video 對象的播放操作及組件內(nèi)的播放狀態(tài)??梢允褂米远x watcher 來優(yōu)化 DOM 的操作。
<!-- MyVideo.vue --> <template> <div> <video ref="video" src="src"></video> <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="togglePlay">{{ playing ? '暫停' : '播放' }}</a> </div> </template> <script> export default { props: { src: String // 播放地址 }, data () { return { playing: false // 是否正在播放 } }, watch: { // 播放狀態(tài)變化時,執(zhí)行對應(yīng)操作 playing (val) { let video = this.$refs.video if (val) { video.play(); } else { video.pause(); } } }, method: { // 切換播放狀態(tài) togglePlay () { this.playing = !this.playing } } } </script>
示例中,自定義 watcher 在監(jiān)聽到 playing 狀態(tài)變化時,會執(zhí)行播放或暫停操作。遇到對視頻播放狀態(tài)的處理時,只需要關(guān)注 playing 狀態(tài)即可。
項目骨架
單組件不異過重,組件在功能獨(dú)立的前提下應(yīng)該盡量簡單,越簡單的組件可復(fù)用性越強(qiáng)。當(dāng)你實(shí)現(xiàn)組件的代碼,不包括CSS,有好幾百行了(這個大小視業(yè)務(wù)而定),那么就要考慮拆分成更小的組件。
當(dāng)組件足夠簡單時,就可以在一個更大的業(yè)務(wù)組件中去自由組合這些組件,實(shí)現(xiàn)我們的業(yè)務(wù)功能。因此,理想情況下,組件的引用層級,只有兩級。業(yè)務(wù)組件引用通用組件。我們可以得到一個扁平化的結(jié)構(gòu)。在一個龐大的項目當(dāng)中,組件間的引用關(guān)系會更復(fù)雜一些。當(dāng)單頁應(yīng)用有多個路由,每個路由組件過重,需要拆分模塊時。
按照這個思路構(gòu)建我們的項目,最后的源代碼目錄結(jié)構(gòu)(不包括構(gòu)建流程文件):
│ App.vue # 頂級組件 │ client-entry.js # 前端入口文件 │ config.js # 配置文件 │ main.js # 主入口文件 │ ├─api # 接口 API ├─assets # 靜態(tài)資源 ├─components # 通用組件 ├─directives # 自定義指令 ├─mock # Mock 數(shù)據(jù) ├─plugins # 自定義插件 ├─router # 路由配置 ├─sections # 業(yè)務(wù)組件 ├─store # Vuex Store ├─utils # 工具模塊 └─views # 路由頁面組件
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
到此,相信大家對“Vue如何實(shí)現(xiàn)一個可復(fù)用組件”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。