vue3全局变量,全局挂载,全局函数引入就这么简单

曹え 5811 发布于:2024-01-05 03:09:50

第一种方法:最简单的方式


在main.js 中添加:


// 全局函数
app.config.globalProperties.G = {
	test(){
		return '你好呀'
	}
};


main.js 完整例子:

import 'ant-design-vue/dist/reset.css';
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue';
import App from './App.vue'
import router from './router'


const app = createApp(App)

// 全局函数
app.config.globalProperties.G = {
	test(){
		return '你好呀'
	}
};

app.use(createPinia())
app.use(router)
app.use(Antd)
app.mount('#app')


使用:

{{ G.text() }}

显示:你好呀


js中使用

// 需要引入 getCurrentInstance
import { getCurrentInstance, reactive } from 'vue';
const { proxy } = getCurrentInstance()

// 使用
proxy.G.test()

第二种:引入js的方式


创建文件: common/G.js

const G = {
	test(){
		return '你好呀'
	}
}

export default G


在main.js中引入

// 全局函数

import G from './common/G.js'
app.config.globalProperties.G = G;


使用:

{{ G.text() }}

显示:你好呀


图解


全局引入



G.js内容


觉得有用请点个赞吧!
1 69

直接使用


image.png