1、mixin的概念

mixin是vue提供的一种方式来分发vue组件的可复用功能，可以将相同的方法、字段等抽离出来，避免重复定义。混入分为局部混入和全局混入，一个mixin对象可以包含任意组件选项，data、methods、mounted等。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件使用了mixin时, mixin中的生命周期函数会先执行,然后在执行组件中的生命周期。

2、混入的使用

1、局部混入

新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "我是张三"
    }
  },
  methods: {
    mixinTest() {
      console.log(this.msg)
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
    <div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
        }
    }
    mounted() {
        this.mixinTest()
    }
}

//我是张三

2、全局混入

在main.js中直接引入使用即可。

import mixin from './mixins/mixin'
Vue.mixin(mixin)

这样就可以直接在组件中使用mixin中定义的字段和方法等。

3、mixin混入的注意事项

• mixin 中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;

• mixin中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的methods,created等选项合并调用;

• mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据

• 如果同时引入多个mixin对象, 执行顺序和引入顺序一致;

4、以uniapp开发小程序举例，使用mixin实现各个页面的分享功能

在小程序中如果想实现分享功能，需要在各个组件中单独写分享方法，如果页面太多的话，非常麻烦。所以可以使用mixin来简化这个流程。

1.首先在mixins目录下新建share.js

export default {
	onShareAppMessage(res) {
		return {
			path:'/pages/tabIndex/tabIndex',
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	}
}

2、在main.js中引入，并混入到vue对象上。

import share from './mixins/share.js'
Vue.mixin(share)