采用依赖注入玩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);