Vue之混入（mixin）

在 Vue 中，混入（mixin）是一个强大的功能，它能够使得相同代码在不同组件中公用，甚至可以将公用代码添加到全局中，能够使得开发更加简洁、规范。所谓混入就是将公用的代码，混入到不同的组件中。

举一个简单的小例子：

// nameMixin.js
export default {
	data() {
		return {
			name: ''
		}
	},
	methods: {
		getStartName(){
			this.name = 'start';
		},
		getEndName(){
			this.name = 'end';
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<tempalte>
	<div>{{ name }}div>
temaplate>

<script>
import nameMixin from './nameMixin.js';
export default {
	mixins: [nameMixin],
	created() {
		this.getStartName();
	}
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<tempalte>
	<div>{{ name }}div>
temaplate>

<script>
import nameMixin from './nameMixin.js';
export default {
	mixins: [nameMixin],
	created() {
		this.getEndName();
	}
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如上所示，nameMixin.js有一个数据 name，和两个获取 name 的方法，StartName.vue 和 EndName.vue 都引入并混入了 nameMixin.js，那么这两个组件也就都相当于有了 name 数据和两个方法，所以可以直接使用和调用。

再说一下全局混入

顾名思义，全局混入就是将一段代码混入到全局，即所有的组件中。很多插件也都是通过全局混入实现的，如 Vuex，将 store 混入到了全局。

const install = (Vue) => {
    Vue.mixin({
    	data() {
			return {
				name: ''
			}
		}
        beforeCreate() {
            this.name = 'all';
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12

上面是一段全局混入代码，我们将所有的组件混入了一个 name 数据，并且在组件创建之前赋予 all 值。

总结

混入有点儿继承的意思，就是子继承了父，子可以直接调用父的方法或数据。

应用场景

1. 对于那些可能全局公用的方法来说，我们可以放到全局混入中，就像后端的 BaseController.java 一样，可以将一些判断用户权限之类的方法放到全局去公用。

2. 或是将常用的代码提取可公用，就比如我写的选择器混入（能够规范选择器，并且比较好维护）：

/**
 * 下拉选择器混入
 */
export default {
  model: {
    event: 'input-change', // 这个事件与下面的emit事件与之对应
    prop: 'value' //
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * 监听值改变，回调change
     */
    listenValue: Boolean
  },
  data() {
    return {
      val: this.value,
      loading: false,
      options: []
    }
  },
  watch: {
    value: {
      handler(n) {
        this.val = n;
        if (this.listenValue) {
          this.toChange(n);
        }
      }
    }
  },
  methods: {
    onChange(value) {
      this.$emit('input-change', value);
      if (!this.listenValue) {
        this.toChange(value);
      }
    },
    toChange(value) {
      if (this.dataKey && this.options) {
        const data = this.options.find(item => String(item[this.dataKey]) === value);
        this.$emit('change', data);
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50