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

前端 | 介绍 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 } = 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')   
        },    
        ... 
    })
}

在组件内使用

<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种方式,基本就够用了吧!

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端 | 介绍 Vue3 中使用全局属性的3种方法 | Vue3

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买