Element組件引發的Vue中mixins使用，寫出高復用組件

AlphaGooo 發布于2019-08-23 15:22 / 1849人閱讀

摘要：我們就來說說如何創建一個靈活的高復用的組件。在一款優秀的組件庫中有這么兩個組件與。什么是官方說法混入是一種分發組件中可復用功能的非常靈活的方式。對象可以包含實例中的所有選項，當組件使用對象時，對象中的所有選項將和組件中的選項進行合并。

我們都知道 Vue 采用的是一種組件化開發模式，組件在 Vue 中一個非常重要的核心概念。每個組件都是一個完整的實例，組件的創建，組件間的通訊，組件如何更好的復用，以及整個的生命周期的鉤子。所以你會發現它都是圍繞組件展開的。

我們就來說說如何創建一個靈活的高復用的組件。之前分享過一篇「slot」內容分發的文章，它可以讓我們組件的內容更加的靈活。有興趣的可以看下。

《Vue一個案例引發「內容分發slot」的最全總結.md》

今天主要分享的是組件中另一種分發，功能的分發「mixins」，也叫混入。在開始之前呢，我們先看個案例，先從案例中看出個大概，然后帶著問題去學習知識點會更加的高效，這也是我個人比較常用的學習方式。

在 Element（一款優秀的組件庫）中有這么兩個組件MessageBox 與 Dialog。

官方說法：

從場景上說，MessageBox 的作用是美化系統自帶的 alert、confirm 和 prompt，因此適合展示較為簡單的內容。如果需要彈出較為復雜的內容，請使用 Dialog。

所以你會發現，這兩個組件非常的相似，他們共享一些相同的基本功能，如：打開/關閉之間的狀態切換。但用法上又各有不同。請看下面的例子

// Message Box



// Dialog
打開 Dialog

  這是一段信息

相似的組件，相同基本功能，這時你不得不做出選擇，是將它們分成兩個不同的組件？還是只保留一個？

顯然這兩種做法都不完美，如果分成兩個組件，后期有功能的變動話，就會去修改多次，帶來維護成本。如果保留一個，但是用法上又各有不同，這可怎么辦呢？

有同學也會有疑問，不就兩個組件嗎？能帶來多少維護成本？其實不僅如此，類似于這種狀態切換的功能還有提示框，彈出框等等。

所以 Vue 給我們提供了一種方案叫功能的分發「mixins」。

什么是 Mixins

官方說法：混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。

簡單來說就是可以讓不同的組件「共用」某個功能。

Mixins 對象可以包含 Vue 實例中的所有選項，當組件使用 Mixins 對象時，Mixins 對象中的所有選項將和組件中的選項進行合并。

既然如此那我們就來嘗試用 Mixins 對象去修改上面兩個組件。讓它們可以共用一個方法。以下組件都是自己書寫的簡單實現，只實現狀態切換的基本功能。

//mixins.js
export const showMixin = {
  data: function () {
    return {
      isShowing: true
    };
  },
  methods: {
    toggle() {
      this.isShowing = !this.isShowing;
    }
  }
}

//MessageBox

可以看到，我們把兩個組件的相同功能給剝離出來，采用 mixins 對象的方式然后在組件中引入即可，這樣以來組件就會有更好的靈活性。

有聰明的小伙伴應該就會有疑問了，如果 mixins 對象中的選項和組件實例中的選項相同時會怎么辦？這也是我們下面要說到的問題，Vue 中給出了我們幾個決策機制，一起來看看。

選項的合并

data 對象的合并

當組件與混入對象的 data 對象發生沖突時，以組件中的優先，如何沒有沖突將會進行遞歸合并。

const mixin = {
  data: function() {
    return {
      hero: "蠻三刀",
      text: "來自mixins中的「上單一霸」"
    };
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  data() {
    return {
      text: "來自組件中的「上單一霸」"
    };
  },
  mounted() {
    console.log(this.$data); 
    // {hero: "蠻三刀",text: "來自組件中的「上單一霸」"}
  }
};

鉤子函數的合并

鉤子函數將會被全部調用，因為同名鉤子函數將會被合并成一個數組，但 mixins 中的鉤子會優先于組件中的鉤子執行。

const mixin = {
  created() {
    console.log("mixins中的上單一霸");
  },
  mounted() {
    console.log("mixins中的中單一霸");
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  created() {
    console.log("組件中的上單一霸");
  },
  mounted() {
    console.log("組件中的中單一霸");
  }
};
//mixins中的上單一霸
//組件中的上單一霸
//mixins中的中單一霸
//組件中的中單一霸

3.值為對象類型的合并

像methods、watch等值為對象類型的會合并成一個對象，如有沖突將采用組件中的。

const mixin = {
  methods: {
    say() {
      console.log("mixins組件上單一霸");
    },
    do() {
      console.log("mixins偷塔");
    }
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  methods: {
    say() {
      console.log("組件上單一霸");
    }
  },
  mounted() {
    this.say(); //組件上單一霸
    this.do(); //mixins偷塔
  }
};

通過上面一些案例的解釋，你應該熟悉了如何利用混入對象去創建一個高復用組件了，不妨去嘗試一下。

最后，希望大家能夠有所收獲。如果你覺得本文不錯歡迎點贊轉發。

關注微信公眾號：六小登登，學習更多干貨文章，領取全套學習資源。

GPU云服務器云服務器 element-ui dialog組件在php中使用組件 vue組件 vue組件開發

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

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

vue之插件編寫

摘要：插件分類插件通常會為添加全局功能，插件的編寫方法一般分為類，如上圖所示的插件應當有一個公開方法。前言前段時間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話插件 Vue 化引發的一些思考這篇文章我不僅僅是要教會大家封裝一個 scroll 組件，還想傳遞一些把第三方插件（原生 JS 實現）Vue 化的思考過程。很多學習 Vue.js 的同學可能還停留在 XX 效果如何用 Vue....

xuexiangjys 2019-08-21 17:04 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

melody_lql 2019-08-02 16:00 評論0 收藏0