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

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

app.config.globalProperties

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

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

在 main.ts 中定义

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

在组件组件中使用

<div>{{ $globalMsg }}</div>

应用层 Provide

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

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

在组件中注入使用

const globalName = inject('$globalName')

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

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

Vite define

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

在vite.config.ts定义

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

在组件中使用

const globalName = __APP_NAME__

获取package.json配置

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

vite.config.ts 配置文件

...import pkg from './package.json'import dayjs from 'dayjs'const { dependencies, devDependencies, name, version } = pkgconst __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')           },            ...     })}

在组件内使用

<script setup lang="ts">const { pkg, lastBuildTime } = __APP_INFO__const { dependencies, devDependencies } = pkg</script>

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

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

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