Vue.js中使用Mixins步奏詳解

這次帶給大家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中文網其它相關文章！

推薦閱讀：

#

以上是Vue.js中使用Mixins步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！