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}}