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/>'

});