在Vue.js中使用Mixins的方法
一個(gè)很常見(jiàn)的場(chǎng)景: 有兩個(gè)非常相似的組件, 它們擁有非常相似的基本功能, 但是它們之間又有足夠的不同的地方, 該如何選擇呢? 我們是應(yīng)該將它們分成兩個(gè)完全不同的組件呢? 還是創(chuàng)建一個(gè)基礎(chǔ)組件, 然后定義足夠多的props以方便區(qū)分使用場(chǎng)景?
這兩種方式都不是完美的: 如果你將它們分成兩個(gè)完全不同的組件, 在需求變化(功能變化)時(shí), 可能會(huì)增加需要同時(shí)修改兩個(gè)組件的風(fēng)險(xiǎn), 這違反了”DRY”的前提. 另一方面, 太多的props很快會(huì)讓人變得凌亂, 并且, 迫使維護(hù)人員, 甚至是你自己, 要首先理解這些props的上下文才能使用它, 這會(huì)讓人非常失望.
Vue的Mixins是非常實(shí)用的編程方式, 因?yàn)樽罱K實(shí)用的編程是通過(guò)不斷減少運(yùn)動(dòng)部件(moving parts)使代碼變得容易理解. (關(guān)于這一點(diǎn), Michael Feathers有一個(gè)很好的引用). 一個(gè)mixin允許你封裝一個(gè)功能, 以便你能在整個(gè)應(yīng)用程序中的不同組件中使用它. 如果mixin被正確的創(chuàng)建, 它們是純粹的–它們不會(huì)修改或更改函數(shù)的作用范圍(scope)之外的內(nèi)容, 因此, 您可以在多個(gè)地方執(zhí)行它們, 并且只要輸入值相同, 總是能非?？煽康玫玫较嗤慕Y(jié)果. 這真的非常強(qiáng)大.
認(rèn)識(shí)Mixins
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈?duì)象可以包含任意組件選項(xiàng)。以組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
栗子
假設(shè)我們有一些不同的組件, 它們的工作是切換狀態(tài)boolean, 一個(gè)模態(tài)(modal)和一個(gè)提示(tooltip). 這些tooltips和modals沒(méi)有很多共同之處, 除了這個(gè)功能: 它們看起來(lái)不一樣, 它們使用起來(lái)也不盡相同, 但是它們的邏輯是相似的 .
//modal
const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
//tooltip
const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
我們可以從中提取邏輯, 并創(chuàng)建可以復(fù)用的部分：
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
const Modal = {
template: '#modal',
mixins: [toggle]
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle]
};
duang — 一個(gè)小而簡(jiǎn)單的:chestnut:讓我們知道了Mixins對(duì)于封裝一些可復(fù)用的功能如此有趣、方便、實(shí)用。
demo地址：https://github.com/hzzly/xyy-vue
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的主動(dòng)觸發(fā)點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法
本文主要介紹了el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue控制臺(tái)警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺(tái)警告Runtime directive used on component with non-element root node解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3中provide和inject數(shù)據(jù)修改規(guī)則
在Vue3中,通過(guò)inject接收到的數(shù)據(jù)是否可以直接修改,取決于provide提供的值的類(lèi)型和響應(yīng)式處理方式,本文給大家介紹Vue3中provide和inject數(shù)據(jù)修改規(guī)則,感興趣的朋友一起看看吧2025-04-04
vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟
這篇文章主要介紹了vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決
這篇文章主要介紹了在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue仿element實(shí)現(xiàn)分頁(yè)器效果
這篇文章主要介紹了vue仿element實(shí)現(xiàn)分頁(yè)器效果，實(shí)現(xiàn)思路是定一個(gè)值foldPage, 意為當(dāng)前最多顯示的標(biāo)簽數(shù),當(dāng)總頁(yè)數(shù)超過(guò)即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實(shí)例代碼大家參考下本文2018-09-09
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口
這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09