Vue 3中定义全局函数和变量的方法

在Vue 3中，你可以通过在主文件（通常是main.js或main.ts）中定义全局函数和变量，使它们在整个应用程序中可用。这样可以避免在每个组件中重复定义相同的函数和变量。
定义全局函数
要在Vue 3中定义全局函数，请在主文件中创建一个新的函数，并将其添加到Vue的原型上。这样，你就可以在任何组件中通过this.$yourFunctionName访问该函数。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义全局函数
function myGlobalFunction() {
console.log('这是一个全局函数');
}
// 将全局函数添加到Vue原型上
app.config.globalProperties.$myGlobalFunction = myGlobalFunction;
app.mount('#app');

现在，你可以在任何组件中使用this.$myGlobalFunction()来调用这个全局函数。
定义全局变量
要在Vue 3中定义全局变量，你可以使用Vue的provide和inject API。provide API用于提供数据，而inject API用于注入数据。你可以在主文件中使用provide API提供数据，并在需要使用该数据的组件中使用inject API注入数据。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义全局变量
const myGlobalVariable = '这是一个全局变量';
app.provide('myGlobalVariable', myGlobalVariable);
app.mount('#app');

然后，在需要使用该全局变量的组件中，你可以使用inject API注入它。

// SomeComponent.vue
<template>
<div>
{{ myGlobalVariable }}
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const myGlobalVariable = inject('myGlobalVariable');
return { myGlobalVariable };
}
}
</script>

现在，你可以在组件的模板中使用{{ myGlobalVariable }}来访问这个全局变量。
需要注意的是，如果你定义的变量是响应式的，你可以直接在app.provide中返回一个对象，然后在注入时直接使用对象的属性。这样Vue会为你自动创建和管理响应式数据。例如：
javascript // main.js app.provide('myGlobalObject', () => ({ name: '张三', age: 25 }));然后在组件中：javascript // SomeComponent.vue setup() { const myGlobalObject = inject('myGlobalObject'); return { myGlobalObject }; }现在你可以在模板中使用{{ myGlobalObject.name }}和{{ myGlobalObject.age }}来访问这个对象的属性。