vue学习之：mixins的理解及应用

vue中提供了一种混合机制–mixins，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

我们先写一个实例。
1.创建一个js文件

// 创建一个需要混入的对象
export const mixinTest = {
    data () {
        return {
        	say: 'hello',
            msg: 'mixinTest'
        }
    },
    created() {
        console.log('混入对象的钩子被调用')
    },
    methods: {
        helloWorld() {
            console.log(this.msg);
        }
    }
};

2.在组件中使用刚刚创建的混入

import {mixinTest} from './js/mixin';
export default {
    mixins:[mixinTest],
    name: 'hello',
    data () {
        return {
            msg: 'world'
        }
    },
    created() {
    	console.log('组件钩子被调用')
        this.helloWorld();
    },
    methods: {
        helloWorld() {
            console.log(this.say + ' ' + this.msg);
        }
    }
}
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
// => “hello world”

mixins 选项合并

1. 当组件和混入对象含有同名data属性选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
   （例：上面实例中，混入对象和组件属性合并发生冲突时，以组件的msg属性为优先。）
2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
   （例：上面实例中，混入对象的钩子先于组件钩子被调用。）
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对，混入对象的方法会被覆盖。
   （例：上面实例中，混入对象和组件的methods发生冲突时，取组件对象的的键值对。）

mixins和普通情况下引入组件有什么区别？

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

• 单纯组件引用：
  父组件 + 子组件 >>> 父组件 + 子组件
• mixins：
  父组件 + 子组件 >>> new父组件
  有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

应用场景

在借助mixins之前，在两个不同的组件的组件中调用相同的方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单：

let mixin={
    methods:{
        hello(){
            console.log('hello mixin!')
        }
    }
}
Vue.component('child1',{ 
        template:`<h1 @click="hello">child1 component</h1>`, 
        mixins:[mixin]
})
Vue.component('child2',{ 
        template:`<h1 @click="hello">child2 component</h1>`, 
        mixins:[mixin]
})

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
})
// => "hello!"

请谨慎使用全局混入，因为Vue.mixin() 可以将自定义的方法混入所有的 Vue 实例中 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

下一篇：vue学习之：slot（插槽）必读