摘要：我們就來(lái)說(shuō)說(shuō)如何創(chuàng)建一個(gè)靈活的高復(fù)用的組件。在一款優(yōu)秀的組件庫(kù)中有這么兩個(gè)組件與。什么是官方說(shuō)法混入是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。對(duì)象可以包含實(shí)例中的所有選項(xiàng)，當(dāng)組件使用對(duì)象時(shí)，對(duì)象中的所有選項(xiàng)將和組件中的選項(xiàng)進(jìn)行合并。

我們都知道 Vue 采用的是一種組件化開(kāi)發(fā)模式，組件在 Vue 中一個(gè)非常重要的核心概念。每個(gè)組件都是一個(gè)完整的實(shí)例，組件的創(chuàng)建，組件間的通訊，組件如何更好的復(fù)用，以及整個(gè)的生命周期的鉤子。所以你會(huì)發(fā)現(xiàn)它都是圍繞組件展開(kāi)的。

我們就來(lái)說(shuō)說(shuō)如何創(chuàng)建一個(gè)靈活的高復(fù)用的組件。之前分享過(guò)一篇「slot」內(nèi)容分發(fā)的文章，它可以讓我們組件的內(nèi)容更加的靈活。有興趣的可以看下。

《Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié).md》

今天主要分享的是組件中另一種分發(fā)，功能的分發(fā)「mixins」，也叫混入。在開(kāi)始之前呢，我們先看個(gè)案例，先從案例中看出個(gè)大概，然后帶著問(wèn)題去學(xué)習(xí)知識(shí)點(diǎn)會(huì)更加的高效，這也是我個(gè)人比較常用的學(xué)習(xí)方式。

在 Element（一款優(yōu)秀的組件庫(kù)）中有這么兩個(gè)組件MessageBox 與 Dialog。

官方說(shuō)法：

從場(chǎng)景上說(shuō)，MessageBox 的作用是美化系統(tǒng)自帶的 alert、confirm 和 prompt，因此適合展示較為簡(jiǎn)單的內(nèi)容。如果需要彈出較為復(fù)雜的內(nèi)容，請(qǐng)使用 Dialog。

所以你會(huì)發(fā)現(xiàn)，這兩個(gè)組件非常的相似，他們共享一些相同的基本功能，如：打開(kāi)/關(guān)閉之間的狀態(tài)切換。但用法上又各有不同。請(qǐng)看下面的例子

// Message Box



// Dialog
打開(kāi) Dialog

  這是一段信息

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

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

有同學(xué)也會(huì)有疑問(wèn)，不就兩個(gè)組件嗎？能帶來(lái)多少維護(hù)成本？其實(shí)不僅如此，類似于這種狀態(tài)切換的功能還有提示框，彈出框等等。

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

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

簡(jiǎn)單來(lái)說(shuō)就是可以讓不同的組件「共用」某個(gè)功能。

Mixins 對(duì)象可以包含 Vue 實(shí)例中的所有選項(xiàng)，當(dāng)組件使用 Mixins 對(duì)象時(shí)，Mixins 對(duì)象中的所有選項(xiàng)將和組件中的選項(xiàng)進(jìn)行合并。

既然如此那我們就來(lái)嘗試用 Mixins 對(duì)象 去修改上面兩個(gè)組件。讓它們可以共用一個(gè)方法。以下組件都是自己書(shū)寫的簡(jiǎn)單實(shí)現(xiàn)，只實(shí)現(xiàn)狀態(tài)切換的基本功能。

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

//MessageBox

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

有聰明的小伙伴應(yīng)該就會(huì)有疑問(wèn)了，如果 mixins 對(duì)象中的選項(xiàng)和組件實(shí)例中的選項(xiàng)相同時(shí)會(huì)怎么辦？這也是我們下面要說(shuō)到的問(wèn)題，Vue 中給出了我們幾個(gè)決策機(jī)制，一起來(lái)看看。

data 對(duì)象的合并

當(dāng)組件與混入對(duì)象的 data 對(duì)象發(fā)生沖突時(shí)，以組件中的優(yōu)先，如何沒(méi)有沖突將會(huì)進(jìn)行遞歸合并。

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

鉤子函數(shù)的合并

鉤子函數(shù)將會(huì)被全部調(diào)用，因?yàn)橥^子函數(shù)將會(huì)被合并成一個(gè)數(shù)組，但 mixins 中的鉤子會(huì)優(yōu)先于組件中的鉤子執(zhí)行。

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.值為對(duì)象類型的合并

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

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偷塔
  }
};

通過(guò)上面一些案例的解釋，你應(yīng)該熟悉了如何利用 混入對(duì)象去創(chuàng)建一個(gè)高復(fù)用組件了，不妨去嘗試一下。

最后，希望大家能夠有所收獲。如果你覺(jué)得本文不錯(cuò)歡迎點(diǎn)贊轉(zhuǎn)發(fā)。

關(guān)注微信公眾號(hào)：六小登登，學(xué)習(xí)更多干貨文章，領(lǐng)取全套學(xué)習(xí)資源。