定义：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
mixin为一个对象，调用方式如下：
// 定义一个混入对象
var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]
})var component = new Component() // => "hello from mixin!"
选项合并：
1.当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
当与被混合对象冲突时，以被混合对象数据优化。
2.同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
全局混入
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
指定会议选项合并策略
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// 返回合并后的值
}
一般项目采取做法：
生成单独的mixin.js文件，再导入到别的文件中
export default {props: {parentItem: {type: Object,default: () => {}},theme: String,iconSize: Number},computed: {parentName () {return this.parentItem.name},children () {return this.parentItem.children},textColor () {return this.theme === 'dark' ? '#fff' : '#495060'}}
}
<template><Submenu :name="`${parentName}`"><template slot="title"><common-icon :type="parentItem.icon || ''"/><span>{{ parentItem.meta.label }}</span></template><template v-for="item in children"><template v-if="item.children && item.children.length === 1"><side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item><menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ item.children[0].meta.label }}</span></menu-item></template><template v-else><side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item><menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ item.meta.label}}</span></menu-item></template></template></Submenu>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item-mixin'
export default {name: 'SideMenuItem',mixins: [ mixin, itemMixin ]
}
</script>