Vue3: 巧用自定义全局属性,封装只为高效率 |
您所在的位置:网站首页 › vue中的ts文件 › Vue3: 巧用自定义全局属性,封装只为高效率 |
简介 要想减少重复性代码,少不了全局属性配置的问题,做这方面的模块封装。当然就是为了少敲点代码,以及为了后续需求变更的时候,我们只需要修改一处地方,而不需要在用到这个模块的页面都要改动一遍,这难道不是内耗,和浪费时间吗。 出于这个目的,再次深研了扩展全局属性 扩展全局属性某些插件会通过 app.config.globalProperties 为所有组件都安装全局可用的属性。举例来说, import axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } } 复制代码我们可能为了请求数据而安装了 this.$http,或者为了国际化而安装了 this.$translate。为了使 TypeScript 更好地支持这个行为,Vue 暴露了一个被设计为可以通过 TypeScript 模块扩展来扩展的 ComponentCustomProperties 接口: 类型扩展的位置我们可以将这些类型扩展放在一个 .ts 文件,或是一个影响整个项目的 *.d.ts 文件中。无论哪一种,都应确保在 tsconfig.json 中包括了此文件。对于库或插件作者,这个文件应该在 package.json 的 types 属性中被列出。 注意:这里的官方介绍,是为后续工具类或者组件封装做前期思路的准备 为了利用模块扩展的优势,我们需要确保将扩展的模块放在 TypeScript 模块 中。 也就是说,该文件需要包含至少一个顶级的 import 或 export,即使它只是 export {}。如果扩展被放在模块之外,它将覆盖原始类型,而不是扩展! 自定义组件封装Vue3过滤器制作关于 Vue2 中的过滤器,过滤器可以通俗理解成是一个特殊的方法,用来加工数据的。 而在 vue3 中,已经去掉了 filters 这个属性,但是我们的需求还是在的。而官网给的建议是可以通过写composition方法,来代替; 但是这样子的话,每次需要使用到类似过滤器的这个方法,都要进行导入,还是比较麻烦;索性在全局配置中,附加进去,如下: 在 main.js 中加上 //vue3配置全局过滤器 app.config.globalProperties.$filters = { //formatTime过滤器的名称 isPeriodEmpty(value: string) { // 实现一个字段为空返回--的过滤器 return value || '--' }, }; 复制代码在组件中使用如下 {{ $filters.isPeriodEmpty(scope.row.abc) }} 复制代码但是这样做的话,ts语法会提示错误 为了解决这个问题,我们这里应用到了上文简介中我所提到的扩展全局属性 ComponentCustomProperties 从上文简介类型扩展的位置,tsconfig.json中 "include": ["**/*.ts", "src/**/*.d.ts", "src/types/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], 复制代码包含的任意位置,添加vue.d.ts文件,并写入 // 扩展全局属性类型 declare module 'vue' { interface ComponentCustomProperties { $filters: { isPeriodEmpty: (value: string) => nay; }; } } export {}; 复制代码保存即可,如图: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |