共计 1532 个字符，预计需要花费 4 分钟才能阅读完成。
简介
要想缩小重复性代码，少不了全局属性配置的问题，做这方面的模块封装。当然就是为了少敲点代码，以及为了后续需要变更的时候，咱们只须要批改一处中央，而不须要在用到这个模块的页面都要改变一遍，这难道不是内耗，和浪费时间吗。
出于这个目标，再次深研了扩大全局属性
扩大全局属性
某些插件会通过 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 || '--'},
};
复制代码
在组件中应用如下
<template #operation=”scope”>
{{$filters.isPeriodEmpty(scope.row.abc) }}
</template>
复制代码
然而这样做的话，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 {};
复制代码
保留即可，如图：