在 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.先引入混入mixinexport 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 和组件中出现了重名现象，那么优先采用组件中定义的数据