高級 Vue 組件模式 (3)

iKcamp 發布于2019-08-23 12:26 / 3491人閱讀

摘要：在中，我們是否也有一些手段或特性來提高組件的復用程度和靈活性呢答案當然是有的，那就是。成果通過實現，我們成功將注入的邏輯抽離了出來，這樣每次需要共享組件的狀態和方法時，混入該即可。

03 使用 mixin 來增強 Vue 組件 目標

之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良好，但是這里面其實是存在一些問題的：

toggle 組件的內部狀態和方法只能和這三個子組件共享，我們期望第三方的組件也可以共享這些狀態和方法

inject 的注入邏輯我們重復編寫了三次，如果可以的話，我們更希望只聲明一次（DRY原則）

inject 的注入邏輯當前為硬編碼，某些情況下，我們可能期望進行動態地配置

如果熟悉 react 的讀者這里可能馬上就會想到 HOC（高階組件）的概念，而且這也是 react 中一個很常見的模式，該模式能夠提高 react 組件的復用程度和靈活性。在 vue 中，我們是否也有一些手段或特性來提高組件的復用程度和靈活性呢？答案當然是有的，那就是 mixin。

實現

關于 mixin 本身的知識，這里就不做過多贅述了，不熟悉的讀者可以去官方文檔了解。我們通過聲明一個叫作 toggleMixin 的 mixin 來抽離公共的注入邏輯，如下：

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"
  }
};

之后，每當需要注入 toggle 組件提供的依賴項時，就混入當前 mixin，如下:

mixins: [withToggleMixin]

如果關于注入的邏輯，我們增加一些靈活性，比如期望自由地聲明注入依賴項的 key 時，我們可以借由 HOC 的概念，聲明一個高階 mixin（可以簡稱 HOM ?? 皮一下，很開心），如下：

export function withToggle(parentCompName = "toggleComp") {
  return {
    inject: {
      [parentCompName]: "toggleComp"
    }
  };
}

這個 HOC mixin 可以按如下的方式使用：

mixins: [withToggle("toggle")]

這樣在當前的組件中，調用 toggle 組件相關狀態和方法時，就不再是 this.toggleComp，而是 this.toggle。

成果

通過實現 toggleMixin，我們成功將注入的邏輯抽離了出來，這樣每次需要共享 toggle 組件的狀態和方法時，混入該 mixin 即可。這樣就解決了第三方組件無法共享其狀態和方法的問題，在在線實例代碼中，我實現了兩個第三方組件，分別是 custom-button 和 custom-status-indicator，前者是自定義開關，使用 withToggleMixin 來混入注入邏輯，后者是自定義的狀態指示器，使用 withToggle 高階函數來混入注入邏輯。

你可以下面的鏈接來看看這個組件的實現代碼以及演示：

sandbox: 在線演示

github: part-3

總結

mixin 作為一種分發 Vue 組件中可復用功能的非常靈活的方式，可以在很多場景下大展身手，尤其在一些處理公共邏輯的組件，比如通知、表單錯誤提示等，使用這種模式尤其有用。

github gist

云服務器 GPU云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98523.html

高級 Vue 組件模式 (1)

摘要：寫在前頭去年，曾經閱讀過一系列關于高級組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術棧是。同時這個組件還擁有一個屬性，用來初始化的狀態值。寫在前頭去年，曾經閱讀過一系列關于高級 react 組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級 angular 組件模式的文章，碰巧最近接手了一個公...

lanffy 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (2)

摘要：編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。成果通過復合組件的方式，我們將組件劃分為了三個更小的職責更加單一的子組件。 02 編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...

Galence 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (5)

摘要：你可以下面的鏈接來看看這個組件的實現代碼以及演示在線演示總結當期望獲得子元素或者子組件的引用時，切記使用和來解決問題。 05 使用 $refs 訪問子組件引用目標在之前的文章中，詳細闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問子組件的一些方法和屬性怎么辦呢？設想以下一個場景：當前的 custom-button 組件中，有一個 input 元素...

woshicixide 2019-08-23 12:27 評論0 收藏0
高級 Vue 組件模式 (9)

摘要：在中，這種類型的組件也可以叫做函數式組件。這種組件和普通組件相比的優勢主要在于，它是無狀態的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。 09 使用 Functional 組件目標到此為止，我們的 toggle 組件已經足夠強大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會發現，整篇文章中，我幾乎沒有對 to...

李義 2019-08-23 12:36 評論0 收藏0
高級 Vue 組件模式 (4)

摘要：使用替換目標在第三篇文章中，我們使用來抽離了注入依賴項的公共邏輯。成果通過作用域插槽，我們有效地避免了第三方組件由于混入而可能造成的命名沖突以及隱式依賴等問題。 04 使用 slot 替換 mixin 目標在第三篇文章中，我們使用 mixin 來抽離了注入 toggle 依賴項的公共邏輯。在 react 中，類似的需求是通過 HOC 的方式來解決的，但是仔細想想的話，react 在早...

LancerComet 2019-08-23 12:27 評論0 收藏0