应用三：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/>'
});