在 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);
}
}
}
}