溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一個很常見的場景: 有兩個非常相似的組件, 它們擁有非常相似的基本功能, 但是它們之間又有足夠的不同的地方, 該如何選擇呢? 我們是應該將它們分成兩個完全不同的組件呢? 還是創建一個基礎組件, 然后定義足夠多的props以方便區分使用場景?
這兩種方式都不是完美的: 如果你將它們分成兩個完全不同的組件, 在需求變化(功能變化)時, 可能會增加需要同時修改兩個組件的風險, 這違反了”DRY”的前提. 另一方面, 太多的props很快會讓人變得凌亂, 并且, 迫使維護人員, 甚至是你自己, 要首先理解這些props的上下文才能使用它, 這會讓人非常失望.
Vue的Mixins是非常實用的編程方式, 因為最終實用的編程是通過不斷減少運動部件(moving parts)使代碼變得容易理解. (關于這一點, Michael Feathers有一個很好的引用). 一個mixin允許你封裝一個功能, 以便你能在整個應用程序中的不同組件中使用它. 如果mixin被正確的創建, 它們是純粹的–它們不會修改或更改函數的作用范圍(scope)之外的內容, 因此, 您可以在多個地方執行它們, 并且只要輸入值相同, 總是能非常可靠得得到相同的結果. 這真的非常強大.
認識Mixins
混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。
栗子
假設我們有一些不同的組件, 它們的工作是切換狀態boolean, 一個模態(modal)和一個提示(tooltip). 這些tooltips和modals沒有很多共同之處, 除了這個功能: 它們看起來不一樣, 它們使用起來也不盡相同, 但是它們的邏輯是相似的 .
//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;
}
}
}
我們可以從中提取邏輯, 并創建可以復用的部分：
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 — 一個小而簡單的:chestnut:讓我們知道了Mixins對于封裝一些可復用的功能如此有趣、方便、實用。
demo地址：https://github.com/hzzly/xyy-vue
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
