Vue 項目中添加全局過濾器以及全局混合mixin

可以在.vue文件中定義局部使用的過濾器

export default{

　　data(){

　　　　return []
　　},

　　filters:{

　　　　toUpperCase:function(value){

　　　　　　return value.toUpperCase();
　　　　}　　
　　}

}

 

如果希望所有的.vue文件都可以使用就可以注冊全局過濾器

　　Vue.filter('toUpperCase',function(value){

　　　　return value.toUpperCase();
　　});　　

 

 

如果過濾器比較多，可以把所有的過濾器統一寫在一個js文件中，再在main.js文件中引入

filter.js

let toUpperCase=value=>{

　　return value.toUpperCase();
}
let toLowerCase=value=>{

　　return value.toLowerCase();
}

export {toUpperCase,toLowerCase}

 

main.js

import * as filters from 'filter.js'

Object.key(filters).each(filter=>{

　　Vue.filter(filter,filters[filter]);

});

  添加混合mixin

混合是一種靈活的分布式復用Vue組件的方式。混合對象可以包含任何組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件的選項。

1當組件與混合對象含有同名的選項時，這些選項將以恰當的方式混合。

1 同名鈎子函數將混合為一個數組，因此都將被調用。另外，混合對象的鈎子將在組件自身鈎子之前調用

2 值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。 兩個對象鍵名沖突時，取組件對象的鍵值對。

Vue.mixin({

　　methods:{

　　　　demo:function(){

　　　　　　alert(1);

　　　　}

　　}

});

在組件文件中可以直接this.demo()，調用demo函數