混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项；全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
需要注意的是：
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前
formatDate 是一个时间格式的函数，经常需要在多个组件中使用，因为我们可以新建一个js文件，把我们需要混入的内容都写在里面
import moment from ‘moment‘; export default { methods: { formatDate (value) { var newDate = moment(value).format(‘YYYY-MM-DD hh:ss:mm‘) return newDate } } }
这样的话，在我们需要的页面import这个js，然后声明一下混入就好，而后就可以像正常的方式去使用就好了
import mixins from ‘@/utils/mixins‘ export default { mixins:[mixins],
mouted () {
this.time = this.formatDate(new Date())
}
}
引入例子：https://juejin.im/post/6844903632815521799
在开发中经常会遇到金钱保留两位小数，时间戳转换等操作。每次我们会写成一个公共函数，然后在页面里面的filters进行过滤。这种方法每次，但是感觉每次需要用到，都要写一遍在filters，如果采用mixins，代码如下：
import { u_fixed } from ‘./tool‘
const mixins = {
filters: {
// 保留两位小数
mixin_fixed2 (val) {
return u_fixed(val)
},
// 数字转汉字，16000 => 1.60万
mixin_num2chinese (val) {
return val > 9999 ? u_fixed(val/10000) + ‘万‘ : val;
}
}}
export default mixins复制代码
然后在需要的页面引入，
import mixins from ‘@/utils/mixins‘ export default { mixins:[mixins] }
之后可以直接在页面内使用我们的过滤操作{{1000 | mixin_fixed2}}
原文：https://www.cnblogs.com/lcxcsy/p/13802925.html