Vue3 如何设置全局过滤器、app.config.globalProperties如何使用配置

软件技术 前端
1

vue3 相比于 vue2 取消了很多的API， filter就在其中，但是我们可以使用其他方法替代vue2中的filter

通过 app.config.globalProperties 来注册一个全局都能访问到的属性
我们再来说说 app.config.globalProperties 是什么，如何使用。

下面是官方给出的相关解释：应用实例 API | Vue.js

2024-05-17_12-34-16
2024-05-17_12-34-161201×1180 73 KB

注意点：如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

具体使用方法：

// main.js页面进行设置

const app = createApp(App);
type TestType = <T extends any>(val: T) => T;

// 注意: 这一步必须添加 亲自试过不加 定义的方法变量不能使用 会报红
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $test: TestType;  //定义的$test的类型
    $name: string;  //定义的$name的类型
  }
}

// 自定义全局方法/变量
app.config.globalProperties.$test=(val)=>{
	return 'val'
};
app.config.globalProperties.$name = 'name'

template模版中如何使用

<template>
	//定义的$test方法
	<div>
		方法: {{ $test('test') }}
	</div>
	
	//定义的$name方法
	<div>
		名称: {{ $name }}
	</div>
</template>
1 Like