vue3 定义使用全局变量的示例详解
作者：代码就是bug
全局变量（函数等）可以在任意组件内访问,可以当组件间的传值使用,这篇文章给大家介绍vue3 定义使用全局变量的示例详解,感兴趣的朋友跟随小编一起看看吧
vue3 定义使用全局变量
在main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入router
import router from './route/index'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
// 定义全局变量
app.config.globalProperties.$key= "这是一个全局变量";
app.mount('#app')在页面中使用
import {getCurrentInstance} from 'vue'
const internalInstance = getCurrentInstance()
// 全局变量
let global=internalInstance.appContext.config.globalProperties;
console.log(global.$key)getCurrentInstance 只能在 setup 或生命周期钩子中调用。
Vue3全局变量使用
全局变量（函数等）可以在任意组件内访问，可以当组件间的传值使用。
main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.config.globalProperties.$global_id=10;
app.config.globalProperties.$global_name="test";
app.provide('global_code', "code");
app.config.globalProperties.global_value="value";
app.mount('#app');App.vue
<template>
<main>
<button @click="clicked">全局变量</button>
</main>
</template>
<script>
import {inject, getCurrentInstance } from 'vue'
export default {
setup () {
const { proxy } = getCurrentInstance();
const codec = inject("global_code");
function clicked(params) {
console.log(proxy.$systemId)
console.log("global_id:",proxy.$global_id)
console.log("global_name:",proxy.$global_name);
console.log("global_value:",proxy.global_value);
console.log("codec:", codec);
}
return {clicked}
}
}
</script>
<!-- <script setup>
//setup的实现
import { inject,getCurrentInstance } from 'vue'
const codec = inject("global_code");
const instance = getCurrentInstance();
function clicked()
{
console.log("test");
console.log("global_id:",instance.appContext.config.globalProperties.$global_id)
console.log("global_name:",instance.proxy.$global_name);
console.log("global_value:",instance.proxy.global_value);
console.log("codec:", codec);
}
</script> -->getCurrentInstance在使用的时候需要注意
getCurrentInstance 支持访问内部组件实例，用于高阶用法或库的开发。
import { getCurrentInstance } from 'vue'
getCurrentInstance 只能在 setup 或生命周期钩子中调用。
如需在 setup 或生命周期钩子外使用，请先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。
组合式 API | Vue.js中文网 (zcopy.site)
到此这篇关于vue3 定义使用全局变量的文章就介绍到这了,更多相关vue3 定义使用全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！