Vue之混入（mixin）

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

举一个简单的小例子：

// nameMixin.js
export default {data() {return {name: ''}},methods: {getStartName(){this.name = 'start';},getEndName(){this.name = 'end';}}
}

<!-- StartName.vue -->
<tempalte><div>{{ name }}</div>
</temaplate><script>
import nameMixin from './nameMixin.js';
export default {mixins: [nameMixin],created() {this.getStartName();}
}
</script>

<!-- EndName.vue -->
<tempalte><div>{{ name }}</div>
</temaplate><script>
import nameMixin from './nameMixin.js';
export default {mixins: [nameMixin],created() {this.getEndName();}
}
</script>

如上所示，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';}});
}

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

总结

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

应用场景

对于那些可能全局公用的方法来说，我们可以放到全局混入中，就像后端的 BaseController.java 一样，可以将一些判断用户权限之类的方法放到全局去公用。
或是将常用的代码提取可公用，就比如我写的选择器混入（能够规范选择器，并且比较好维护）：

/*** 下拉选择器混入*/
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);}}}
}