vue mixin(混入)的使用

混入 (mixin) 用来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

虽然混入也可以实现数据的传递,类似于vuex ,但是最大的区别是,混入的数据都属于组件内部,也就是多个组件混入,之间的数据并不会互相影响

使用方法

// 1.先创建一个需要混入的文件:
var myMixin = {          // 这是一个js文件
    data() {             // 这里可以包含所有.vue文件中的选项属性,比如所有的生命周期等,可以变相的认为这就是一个.vue文件
        return {
            msg: 123456  
        }
    },
    created() {
        console.log('哈哈哈')
    }
}
export default myMixin     // 导出文件

// 2.然后在任何需要使用的组件中导入使用:
import myMixin from '@/mixins/index.js' 
// 引入使用混入对象,这里是和data平级的.
mixins: [myMixin],      
created() {
// 可以直接访问混入进来的属性,还是可以理解为混入的文件就是和这个.vue文件的并集
    console.log(this.msg)     
},

全局混入: (需要注意全局混入影响所有Vue实例!)

// 在main.js中注册全局混入:
Vue.mixin({
  created: function () {
    console.log('全局混入')
  }
})

注意点
1.组件data中的数据与混入中data的数据冲突时,取组件内数据

2.使用相同的生命周期函数时,混入和组件内的会合并成一个数组,都会被调用,但是混入的函数会优先调用

3.值为对象的选项,例如methods,components,会形成一个对象,都会执行, 但是当混入和组件内有相同的键名时,
取组件内对象的键值对

4.当有局部混入和全局混入冲突时,取局部混入的数据