應用三：Vue之混入(mixin)與全局混入

 

（注：本文適用於有一定Vue基礎或開發經驗的讀者，文章就知識點的講解不一定全面，但卻是開發過程中很實用的）

 

首先介紹一下混入mixin的概念：

 

官方文檔：混入提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

 

個人理解：混入就是用來對vue組件中的公共部分，包括數據對象、鈎子函數、方法等所有選項，進行提取封裝，以達到代碼的復用。

 

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

首先新建一個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/>'
});