vue3定义全局变量

作者：旭旭移日发布日期:2025-12-12 浏览:33

// main.js

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

// 创建Vue应用实例
const app = createApp(App);

// 定义全局变量，这里以一个简单的字符串为例
app.config.globalProperties.$globalVar = '这是一个全局变量';

// 挂载应用
app.mount('#app');

// 在组件中使用全局变量的示例
// <script>
// export default {
//   mounted() {
//     console.log(this.$globalVar); // 输出: 这是一个全局变量
//   }
// }
// </script>

解释说明：

创建Vue应用实例：通过createApp(App)创建一个新的 Vue 应用实例。
定义全局变量：使用app.config.globalProperties来定义全局变量。在这个例子中，我们定义了一个名为$globalVar的全局变量，并赋值为'这是一个全局变量'。注意，习惯上我们会给全局属性加上$前缀，以便与组件的自有属性区分开来。
挂载应用：通过app.mount('#app')将应用挂载到页面中的某个 DOM 元素上（例如，ID 为 app 的元素）。
在组件中使用全局变量：在任何组件中，可以通过this.$globalVar访问这个全局变量。

上一篇：vue socket

下一篇：vue解决跨域问题