对于Java后端来说继承是必不可少的，对于Vue来说混入就像继承不可或缺。但是很多人都不喜欢或者很少用混入，那么今天就来谈谈Vue混入的重要性。

1. 通用组件混合

想必大家都创建过公用组件，对于一些组件来说，往往都存在共通性，如选择器，我们可以将选择器通用的参数、方法等单独提取

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

然后一个选择器组件就能轻而易举的实现：

<template><el-selectv-model="val"filterableremoteplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"@change="onChange"v-bind="$attrs"><el-optionv-for="item in options":key="item.deviceTypeId":label="item.name":value="item.deviceTypeId"></el-option></el-select>
</template><script>
import {listByKeyWord} from "@/api/bayonet/device_type";
import selectMixin from "@/components/Selector/selectMixin";export default {name: "DeviceTypeSelect",mixins: [selectMixin],methods: {remoteMethod(query) {this.loading = true;listByKeyWord({searchValue: query}).then(res => {this.options = res.data;this.loading = false;});}},created() {listByKeyWord('').then(res => {this.options = res.data;});}
}
</script>

2. 可选择性混入

对于页面，可能仅有一小部分需要某项功能，那么我们就可以将这些功能封装，做成混入，在有必要时引入混入，如：

import {mapState} from "vuex";export default {data() {return {roleMap: {/*** 超管*/admin: 'admin',/***服务中心*/fuwuzhongxin: 'fuwuzhongxin',/***企业*/enterprise: 'enterprise',/***应急办*/yingjiban: 'yingjiban',/***审批管理部*/shenpi: 'shenpi',/***企业用户*/enterprise_user: 'enterprise_user',/*** 司机用户*/driver: 'driver'}}},computed: {...mapState({user: state => state.user,}),/*** 当前用户是否为管理员* @returns {*|boolean}*/isAdmin() {return this.user.userInfo.admin || false;},/*** 当前用户是否为企业* @returns {boolean}*/isEnterprise() {if (!this.user || !this.user.roles) {return false;}return this.user.roles.includes(this.roleMap.enterprise) || this.user.roles.includes(this.roleMap.enterprise_user) || false;},/*** 当前用户是否为服务中心* @returns {boolean}*/isFuwuzhongxin() {if (!this.user || !this.user.roles) {return false;}return this.user.roles.includes(this.roleMap.fuwuzhongxin) || false;},},methods: {/*** 判断当前用户是否某一角色* @param roleCode 角色编码* @returns {boolean}*/isRole(roleCode) {if (!this.user || !this.user.roles) {return false;}return this.user.roles.includes(roleCode) || false;},/*** 判断当前用户包含某一角色* @param roleCodes 角色列表* @returns {boolean}*/isAnyRole(...roleCodes) {if (!this.user || !this.user.roles) {return false;}return roleCodes.some(roleCode => this.user.roles.includes(roleCode));},/*** 判断当前用户包含所有角色* @param roleCodes 角色列表* @returns {boolean}*/isEveryRole(...roleCodes) {if (!this.user || !this.user.roles) {return false;}return roleCodes.every(roleCode => this.user.roles.includes(roleCode));}}
}

然后在需要的地方引入：

import userMixin from "@/mixins/userMixin";
export default {name: "Form",mixins: [userMixin]
}

3. 全局工具混入

对于一些比较常用的工具，我们可以使用全局混入将其添加到所有组件

export default function (Vue) {Vue.mixin({methods: {isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)},validUsername(str) {const valid_map = ['admin', 'editor']return valid_map.indexOf(str.trim()) >= 0},validURL(url) {const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/return reg.test(url)},validLowerCase(str) {const reg = /^[a-z]+$/return reg.test(str)},validUpperCase(str) {const reg = /^[A-Z]+$/return reg.test(str)},validAlphabets(str) {const reg = /^[A-Za-z]+$/return reg.test(str)},validEmail(email) {const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/return reg.test(email)},isString(str) {if (typeof str === 'string' || str instanceof String) {return true}return false},isArray(arg) {if (typeof Array.isArray === 'undefined') {return Object.prototype.toString.call(arg) === '[object Array]'}return Array.isArray(arg)}}})
}

然后再main.js中引入，然后就能再任何组件中使用这些方法了

import globalUtils from '@/mixins/globalUtils';
Vue.use(globalUtils);

总结

其实还有很多使用方式，混入具有很强的灵活性，在于自己的不断探索。
很多框架也凭借者混入实现了全局性的各种功能，混入其实能够使得代码更容易集中维护，更加灵活，简单，甚至规范。