Element組件引起的Vue中mixins使用，寫出高複用組件

咱們都知道 Vue 採用的是一種組件化開發模式，組件在 Vue 中一個很是重要的核心概念。每一個組件都是一個完整的實例，組件的建立，組件間的通信，組件如何更好的複用，以及整個的生命週期的鉤子。因此你會發現它都是圍繞組件展開的。

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

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

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

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

官方說法：

從場景上說，MessageBox 的做用是美化系統自帶的 alert、confirm 和 prompt，所以適合展現較爲簡單的內容。若是須要彈出較爲複雜的內容，請使用 Dialog。

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

// Message Box
<template>
  <el-button type="text" @click="open">打開 Message Box</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操做將永久刪除該文件, 是否繼續?', '提示', {
          confirmButtonText: '肯定',
          cancelButtonText: '取消'
        })
      }
    }
  }
</script>

// Dialog
<el-button type="text" @click="dialogVisible = true">打開 Dialog</el-button>
<el-dialog
  :visible.sync="dialogVisible">
  <span>這是一段信息</span>
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    }
  };
</script>

類似的組件，相同基本功能，這時你不得不作出選擇，是將它們分紅兩個不一樣的組件？仍是隻保留一個？

顯然這兩種作法都不完美，若是分紅兩個組件，後期有功能的變更話，就會去修改屢次，帶來維護成本。若是保留一個，可是用法上又各有不一樣，這可怎麼辦呢？

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

因此 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
<template>
  <div class="panel-box">
    //省略
  </div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
  name: "MessageBox",
  mixins: [showMixin]
};

//DialogBox
<template>
  <div class="panel-box">
    //省略
  </div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
  name: "DialogBox",
  mixins: [showMixin]
};
</script>

能夠看到，咱們把兩個組件的相同功能給剝離出來，採用 mixins 對象的方式而後在組件中引入便可，這樣以來組件就會有更好的靈活性。

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

選項的合併

1. 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: "來自組件中的「上單一霸」"}
  }
};

1. 鉤子函數的合併

鉤子函數將會被所有調用，由於同名鉤子函數將會被合併成一個數組，但 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偷塔
  }
};

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

最後，但願你們可以有所收穫。若是你以爲本文不錯歡迎點贊轉發。

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