学习Vue3 第二十九章(Vue3定义全局函数和变量)

简介: 学习Vue3 第二十九章(Vue3定义全局函数和变量)

globalProperties


由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替 然后去定义变量和函数


Vue2


// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}


Vue3


// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}


过滤器


在Vue3 移除了


我们正好可以使用全局函数代替Filters


案例


app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `$${str}`
  }
}


声明文件 不然TS无法正确类型 推导


type Filter = {
    format<T>(str: T): string
}
// 声明要扩充@vue/runtime-core包的声明.
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module 'vue' {
    export interface ComponentCustomProperties {
        $filters: Filter
    }
}


setup 读取值


import { getCurrentInstance, ComponentInternalInstance } from 'vue';
const { appContext } = <ComponentInternalInstance>getCurrentInstance()
console.log(appContext.config.globalProperties.$env);
推荐第二种方式
import {ref,reactive,getCurrentInstance} from 'vue'
const app = getCurrentInstance()
console.log(app?.proxy?.$filters.format('js'))


目录
相关文章
|
3天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
18 4
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
25 2
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的诗词学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的诗词学习系统附带文章源码部署视频讲解等
16 1
|
7天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
7天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
11 0
|
7天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
43 0
|
7天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
21 0
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
11 0
|
1天前
|
JavaScript
vue知识点
vue知识点
9 3
|
6天前
|
JavaScript