1、什么是mixins
混入 (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())
}
}
3、其他常见使用方法
引入例子: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}}