Vue3注册全局属性

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

vue3中注册一个全局属性，在任何的组件都可以使用

const app = createApp()
app.config.globalProperties.xxx = xxx//这样就注册了一个全局属性

结构分离，不能所有的逻辑都写在createApp这个文件里面，需要单独建立文件，然后以中间件的形式插入进来

理解app.use()

//字符串 vuex vue-router
const app = createApp(App)
app.use(router)//函数形式 （自动执行）
import { App } from 'vue'  //App是类型
app.use(function(app: App) {//自定义插件的形式（）
})//对象形式 (自动执行install方法)
app.use({install: function(app: App) {}
})

注册一个全局的时间过滤器

// src/global/index.tsimport { App } from 'vue'
import rigsterProperties from './registerProperties'export function globalRegister(app: App) {app.use(rigsterProperties)
}

上面这个文件，可以注册多个全局属性，所以需要进行统一导出，然后注册。（比如：还可以动态注册ElementPlus）

// src/global/registerProperties.tsimport { App } from 'vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'dayjs.extend(utc)const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'export default function rigsterProperties(app: App) {app.config.globalProperties.$filter = {//格式化时间 utcformatUtc: (utc: string, format: string = DATE_TIME_FORMAT) => {return dayjs.utc(utc).format(format)}}
}

在具体的文件中，代码逻辑实现。

//main.tsimport { globalRegister } from '@/global'
app.use(globalRegister)

在项目入口文件，进行注册。

Vue3注册全局属性相关推荐

vue3 注册全局方法定义全局方法
1.定义工具类 // 格式化时间 function FormatDate (time: string) {if (Tool.isNotEmpty(time)) {const date = new Da ...
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性. 一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用在页面之间传值,或者不用重复加载. 下面以全局属性为例 ...
6.微信小程序的如何使用全局属性
下面以全局属性为例新建一个hello world项目在app.js页面中有一个globalData,这是一个全局对象. 在里面添加一个属性 info:"你好" 那么要怎样才能获 ...
html全局属性什么意思,# HTML # HTML全局属性
HTML 中的全局属性对任何 HTML 元素有效! HTML4 中的全局属性 1.class 规定元素的类名,主要用于写样式. 所有主流浏览器都支持 class 属性在 HTML 4.01 中, c ...
《HTML5游戏编程核心技术与实战》一2.6 其他全局属性
本节书摘来异步社区<HTML5游戏编程核心技术与实战>一书中的第2章,第2.6节,作者: 向峰责编: 杨海玲,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2 ...
HTML5全局属性和事件
全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语境,下面 ...
030_SpringBoot全局属性配置文件
1. 在src/main/resources下, 新建application.properties 1.1. 修改内嵌容器的端口号 1.2. 配置随机值 1.3. 变量引用 1.4. 自定义属性配置 ...
HTML中的全局属性
一.全局属性和局部属性每种元素都有自己规定的属性,这种属性成为局部属性.还有另外一种属性,他可以用来配置所有元素的共有行为,这种属性成为称为全局属性.全局属性可以用在任何一个元素身上,但是不一定会带 ...
HTML 5 全局属性
<!DOCTYPE html> <html><head><metacharset="utf-8" /><title>全局 ...

Vue3注册全局属性

理解app.use()

注册一个全局的时间过滤器

Vue3注册全局属性相关推荐

最新文章

热门文章