寫項目的時候，有一些方法我們是需要全局使用的，比如數(shù)字的四色五入保留小數(shù)點啊、一些工具方法、字符的格式化啊等等。這些很多頁面需要用的、使用頻率極高的方法，我們一般會將其封裝為全局的方法；我以前是這樣做的，有這么幾種方式：

1、掛載到vue.prototype

• 在main.js入口文件中掛載到vue.prototype，如我們封裝一個獲取時間戳的函數(shù)。

Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  

• 然后就可以在.vue頁面中使用了

<script>  
    export default {   
        mounted(){  
            console.log('now:' + this.now());  
        },  
    }  
</script>  

2、全局混入mixins

• 同樣也還是在main.js中。
• mixins的全局注入規(guī)則大家應(yīng)該都懂，如果組件中沒有這個getTime方法，那么就會在頁面中注入這個方法。

Vue.mixin({
  data() {},
  methods: {
    getTime() {  
      return new Date().getTime();
    }
  } 
});
new App({
  el: '#app'
  // ...
});

3、關(guān)于vue.filters

（1）問題

• 前面兩種方法弊端有很多，比如一般將全局變量掛載到prototype總是不太好的，狀態(tài)管理我們用vuex；第二個全局混入的話，子組件中也會混入這些方法等等；最大的弊端就是代碼的可讀性和維護(hù)問題，如果項目體積大了，復(fù)用的方法多了，總不能都掛到prototye上去對吧？
• 這個時候，vue.filters過濾器就能夠較好的解決這個問題。

（2）使用

• 先看一波官網(wǎng)-->傳送門

• ok，看完了，基本了解了過濾器的概念和基本使用方式以后，我們具體到項目中的使用。

• 新建一個filters文件夾，丟一行代碼（很常用的一行代碼，就是對數(shù)字做一些四舍五入的處理）
  

  數(shù)字四舍五入保留兩位小數(shù)點

• main.js中引入

// global filters
import Vue from 'vue';
import * as filters from '@/filters'; 

Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});

• 然后頁面中就可以使用了

<div>{{num | formatAmountFixed2}}</div>

<script>
data(){
    return {
        num: 11111
    }
}
</script>

你可能感興趣：
Ewall的簡書
vscode+eslint讓你編程快到飛起
手把手教你用vue+node+mongodb搭建一個小商場
小程序的因難見巧
看完你就該會git了
CSS日常踩坑后的總結(jié)