vue3中使用全局变量(vue2x中this)

vue3中使用全局变量(vue2x中的Vue.prototype)

1.使用provide/inject

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('name','xianyu')
app.mount('#app')

在HelloWorld.vue中

import {onMounted,inject} from 'vue'

setup(){
	const name = inject('name')
	onMounted(()=>{
		console.log('name',name); // xianyu
	})
}

2.使用globalProperties/getCurrentInstance()

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.config.globalProperties.name = 'xianyu'
app.mount('#app')

在HelloWorld.vue中

import {getCurrentInstance,onMounted} from 'vue'

setup(){
	// 在ts中直接使用 const { proxy }=getCurrentInstance().可能会报 Property 'proxy' does not exist on type 'ComponentInternalInstance | null'. 的错误.
	const { proxy } = (getCurrentInstance() as any);// 目前我是这样解决,如果有其他方法也可以分享一下
	onMounted(()=>{
		console.log('proxy',proxy.name); // xianyu
	})
}