Vue.mixins混入方法的使用

1、什么是mixins

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项；全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。

需要注意的是：

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

2、mixins的使用

举个例子，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}}