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函数
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步