Vue3定义全局变量的方式总结

1、main.js 设置全局变量。

import { createApp } from 'vue'import App from './App.vue'const app = createApp(App);/** 定义一个函数，用于对象链式取值 */const getObjChainingVal = (obj, keyName) => {  // ...  return tempObj}app.config.globalProperties.getObjChainingVal = getObjChainingVal;/**定义变量$website，并赋值为devcursor**/app.config.globalProperties.$website = 'devcursor';

在其他页面使用的时候

（1）在模板中使用：

<template>  <div>    作者：{{ getObjChainingVal(data, 'user.info.name') }}    <div>{{ $website }}</div>  </div></template>

（2）在语法糖<script setup>里使用：

<script setup>import { getCurrentInstance } from 'vue'const app = getCurrentInstance()const website = app.appContext.config.globalProperties.$websiteconsole.log(website)// 或者const { proxy } = getCurrentInstance()console.log(proxy.$website)// 使用解构赋值const { $web } = getCurrentInstance()!.appContext.config.globalPropertiesconsole.log($web)/**注意！getCurrentInstance()不能在回调函数、方法里使用**///若要访问全局变量，需在函数外面调用getCurrentInstance()const { proxy } = getCurrentInstance()//或者const name = getCurrentInstance().proxy.$website;const getUserInfo=()=>{   console.log(proxy.$website);   console.log(name);}</script>

（3）组件实例中使用

<script>export default {  mounted() {    console.log(this.$website) // 'devcursor'  }}</script>

2、使用provide定义变量、inject获取变量

（1）父组件使用provide定义变量

import {provide} from "vue";const data='hello Word';provide('data',data);

（2）子组件通过inject获取变量

import {inject} from "vue";const data=inject('data');console.log(data,'555555555555555555555');   //输出为：hello Word