Vue之混入(mixin)與全局混入

接下來通過一個簡單的例子看看混入的基礎用法：

首先新建一個mixin.js文件，添加以下代碼。

let mixin = {
  data() {
    return {
      msg: 'hello mixin'
    }
  },
  created() {
    console.log('混入的鈎子函數');
  },
  methods: {
    show() {
      console.log(this.msg);
    }
  }
}
export default mixin;

然后新建一個index.vue文件，添加以下代碼。

<template>
  <div id="myVue">
    <span @click="show">{{msg}}</span>
  </div>
</template>
<script>
  import myMixin from './mixin.js';
  export default {
    name: 'myVue',
    mixins: [myMixin],
    created() {
      console.log('組件自身的鈎子函數');
    }
  }
</script>

注意：在index.vue文件中要先引入mixin.js文件，然后就可以直接使用mixin.js中定義的數據msg和方法show。

而對於混入對象以及組件自身的created鈎子函數呢，它們都將被調用。但混入對象的鈎子會在組件自身的鈎子之前調用。

如果組件自身定義了與鈎子對象中同名的數據或方法，為了避免沖突，vue將優先使用組件自身的數據或方法。

當然也可以將混入對象全局注冊，在之后新建的所有vue組件中就都可以使用。

接下來分享一下全局混入的注冊方法。

方法一：在工程的main.js中直接注冊，實現如下：

import Vue from 'vue';
import App from './App';

Vue.mixin({
  created() {
    console.log('全局混入的鈎子函數');
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

方法二：模塊化注冊，新建mixin.js文件並添加以下代碼：

export default {
  install(Vue) {
    Vue.mixin({
      created() {
        console.log('全局混入的鈎子函數');
      }
    })
  }
}

然后在main.js中引入該文件並使用use方法進行注冊

import Vue from 'vue';
import App from './App';
import myMixin from './mixin.js';

Vue.use(myMixin);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});