Vue3挂载全局变量及使用办法1

采用依赖注入玩VUE3全局变量

// 采用依赖注入玩VUE3全局变量
const myname = { firstname: 'xiao', lastname: 'tianya' };
const myage = 38;
app.provide('global', { myname, myage });

使用办法

<template>
  全局变量测试：
  {{ `${global.myname.firstname} And ${global.myname.lastname}` }}
  {{ global.myage }}
  <el-input type="text" v-model="global.myname.firstname"></el-input>
  <el-input type="text" v-model="global.myage"></el-input>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, inject, reactive } from 'vue';

// 获取全局变量
// const global: any = inject('global'); 
const global: any = reactive(inject('global')); // reactive开启响应式(仅在当前组件相应)
</script>

常规全局变量

// 挂载全局变量的方法1
const appModel = dModel();
app.config.globalProperties.$appModel = appModel.model;

使用办法

const globalProperties =
  getCurrentInstance()?.appContext.config.globalProperties;
const appModel = reactive(globalProperties?.$appModel);