前端 | 介绍 Vue3 中使用全局属性的3种方法 | Vue3

前端 | 介绍 Vue3 中使用全局属性的3种方法 | Vue3

app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，如果全局属性与组件自己的属性冲突，自己属性优先级更高。

与任何全局的东西一样，应该谨慎使用。

在 main.ts 中定义

app.config.globalProperties.$globalMsg = 'hello'

• 1

在组件组件中使用

{{ $globalMsg }}

• 1

应用层 Provide

父组件给后代组件透传属性时，使用依赖注入provide&inject，除此之外，它还可以用于在整个应用层面提供依赖。在main.ts中提供

app.provide('$globalName', 'mocha-vue3-admin')

• 1

在组件中注入使用

const globalName = inject('$globalName')

• 1

provide和config.globalProperties在应用层面提供全局属性，感觉差不太多，反正官方都不太推荐使用全局性的东西，所以具体情况具体分析吧。

个人看法是：config.globalProperties用着更简单，provide更适合开发组件/插件使用。

Vite define

如果使用Vite的话，define也可以定义全局常量， 它和上面2位的区别还是比较大。

在vite.config.ts定义

define: { __APP_NAME__: JSON.stringify('mocha-vue3-admin') },

• 1
• 2
• 3

在组件中使用

const globalName = __APP_NAME__

• 1

获取package.json配置

define 是 Vite 配置选项，通过它我们可以获取package.json 的信息，并在组件内显示，比如获取项目依赖信息。

vite.config.ts 配置文件

... import pkg from './package.json' import dayjs from 'dayjs' const { dependencies, devDependencies, name, version } = pkg const __APP_INFO__ = {  pkg: { dependencies, devDependencies, name, version },  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss')} export default ({ mode }) => {   return defineConfig({     ...     define: {       __APP_INFO__: JSON.stringify(__APP_INFO__),       __APP_NAME__: JSON.stringify('mocha-vue3-admin')    },     ...  }) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

在组件内使用

• 1

使用ts需要在 vite-env.d.ts 添加类型声明，否则组件代码会爆红哦～

declare const __APP_INFO__: {  pkg: {    dependencies: {}    devDependencies: {}  }  lastBuildTime: string}

• 1

有以上3种方式，基本就够用了吧！