這次給大家帶來Vue.js中使用Mixins步奏詳解，Vue.js中使用Mixins的注意事項有哪些，下面就是實戰案例，一起來看一下。
一個很常見的場景: 有兩個非常相似的元件, 它們擁有非常相似的基本功能, 但是它們之間又有足夠的不同的地方, 該如何選擇呢? 我們是應該将它們分成兩個完全不同的元件呢? 還是建立一個基礎元件, 然後定義足夠多的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對于封裝一些可複用的功能如此有趣、友善、實用。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：