vue 混入（mixin）的使用

在 vue 组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。
现在开始我们的混入使用吧
1、我们可以创建一个目录mixins，在创建一个comment.js文件如图：

// 在 common.js 里写你想共享的需求
export default {
  created() { },
  methods: {
    balaHello() {
      console.log('hello page component');
    }
  }
}

2、使用混入

• 2-1：全局混入

// 在 main.js 中直接引入
import mixin from '@/mixins/common' // 注意路径
Vue.mixin(mixin) // 注册

<script>
  export default {
      mounted() {
        this.balaHello() // hello page component
   	  }
  }
script>

• 2-2：局部混入

<template>
   <div>
       <button @click='handleMixin'>点击我button>
   div>
template>

<script>
  import sayMixin from '@/mixins/common'; // 1.先引入混入mixin

  export default {
    mixins:[sayMixin], // 2.以数组的形式注册（键是固定的）
    methods:{
      handleMixin(){ // 3.点击就可以调用 common.js 里面的方法
      	this.balaHello(); // hello page component
      }
    }
  }
</script>

3、mixin 混入的注意事项

1、mixin 中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的 methods、created 等选项合并调用
2、mixin 中定义的方法和参数在各组件中不共享，即当前组件对 mixin 的属性的修改，其他也引用了这个 mixin 的组件不会受影响
3、如果同时引入多个 mixin 对象, 执行顺序和引入顺序一致
4、要是 mixin 和组件中出现了重名现象，那么优先采用组件中定义的数据