1. 混入概述

混入 (minxin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被 “混合” 進(jìn)入該組件本身的選項(xiàng)

// 定義一個(gè)混入對象
const myMixin = {
  data() {
    return {
      name: "liang",
    };
  },
  methods: {
    sayHello() {
      console.log("hello !");
    },
  },
};
// 定義一個(gè)使用混入對象的組件
export default {
  mixins: [myMixin],
  data() {
    return {}
  }
}

2. 選項(xiàng)合并

當(dāng)組件和混入對象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將 以恰當(dāng)?shù)姆绞竭M(jìn)行合并

數(shù)據(jù)對象 (data 選項(xiàng)) 在內(nèi)部會(huì)進(jìn)行遞歸合并，同名時(shí)以組件數(shù)據(jù)優(yōu)先，示例如下所示：

如果混入 myMixin, myMixin2 兩個(gè)對象，數(shù)據(jù)對象同名時(shí)優(yōu)先級(jí)為：組件數(shù)據(jù) > myMixin2 數(shù)據(jù) > myMixin 數(shù)據(jù)

mixins: [myMixin, myMixin2]

同名鉤子函數(shù)將合并為一個(gè)數(shù)組，都會(huì)被調(diào)用?；烊雽ο蟮你^子將在組件自身鉤子之前調(diào)用。

const mixin = {
  created() {
    console.log('混入對象的鉤子被調(diào)用')
  }
}
new Vue({
  mixins: [mixin],
  created() {
    console.log('組件鉤子被調(diào)用')
  }
})
// => "混入對象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"

對于值為對象的選項(xiàng)，如：methods、components、directives，將合并為一個(gè)對象，鍵名同名時(shí)取組件對象的鍵值對

const mixin = {
  methods: {
    foo() {
      console.log("混入對象的方法");
    },
  },
};
new Vue({
  mixins: [mixin],
  methods: {
    foo() {
      console.log("組件的方法");
    },
  },
});
vm.foo() // => "組件的方法"

3. 全局混入

uView 小程序分享 利用全局混入實(shí)現(xiàn)全局分享

混入也可以進(jìn)行全局注冊，使用時(shí)一定要格外小心 ！一旦使用全局混入，將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例

const mixin = {
  methods: {
    foo() {
      console.log("混入對象的方法");
    },
  },
};
Vue.mixin(mixin);