Vue中mixin的使用

什么是混入？

混入通过注入配置项到vue实例用来提升复用性

1. 基础使用

    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };

    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 选项合并

选项合并发生在下面两种情况

• mixins接收的是一个数组,mixin中的属性冲突时会发生合并
• mixin属性和组件原有属性冲突时

    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };

    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from vue instance');
        },
      },
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上述两种的选项合并规则是相同的:

1. 周期钩子冲突的时候,会合并成数组都保留,执行顺序是先执行minxi的钩子,再执行组件上的钩子
2. methods、computed这类值为对象的选项在冲突的时候以组件属性为准

自定义合并规则

除了使用上述默认的合并规则,还可以通过Vue.config.optionMergeStrategies自定义合并规则。

	Vue.config.optionMergeStrategies.myMixin=(toVal, fromVal){
	//返回合并的值
	};
1
2
3

通常对于值为对象的属性我们可以借用已有的合并规则

	//借用methods的规则
	Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;
1
2

全局混入

混入也可以全局注册,使用时候要格外小心,它会影响到每一个组件/实例

    Vue.mixin({
      created: function () {
        console.log('mixin created');
      },
    });
    var vm1 = new Vue(...);
    var vm2 = new Vue(...);
1
2
3
4
5
6
7

总结

1. mixin混入通过注入配置项到vue实例提升复用性
2. 属性冲突时以组件内的属性为准,声明周期的钩子会保留多个