一、参考

学习Vue3 第二十九章（Vue3定义全局函数和变量）_vue3全局函数-CSDN博客

二、全局变量

2.1 定义

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

export const app =  createApp(App)

app.config.globalProperties.$env = 'dev'
app.mount('#app')

2.2 使用

此时在任意一个组件都可以获取

<template>
    {{ $env }}
</template>
    
<script setup lang='ts'>
 
</script>
    
<style>
</style>

三、全局函数

3.1 定义

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


export const app =  createApp(App)

app.config.globalProperties.$env = 'dev'

app.config.globalProperties.$sayHi = {
    say(name:string){
        return "hi "+ name
    }
}

app.mount('#app')

3.2 使用

<template>
    {{ $env }}
    <br>
    {{ $sayHi.say("xyy") }}
</template>
    
<script setup lang='ts'>
 
</script>
    
<style>
</style>

四、ts 中使用全局变量和函数

<template>
    {{ $env }}
    <br>
    {{ $sayHi.say("xyy") }}
</template>
    
<script setup lang='ts'>
 import { getCurrentInstance } from 'vue';

 const app = getCurrentInstance()
 console.log(app?.proxy.$sayHi.say("zhangsan"))
 console.log(app?.proxy.$env) 


</script>
    
<style>
</style>