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函数

 

转载于:https://www.cnblogs.com/xiaofenguo/p/10401789.html