vue：用一个文件配置全局常量/方法和全局组件

某只杂鱼

已于 2023-07-31 16:59:56 修改

阅读量3.1k

点赞数 3

分类专栏： vue 文章标签： vue

于 2022-04-18 20:59:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36604536/article/details/124258981

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建一个`global.vue`文件，用于集中管理全局常量、函数及组件。首先，在`global.vue`中定义并导出全局变量和组件。然后，在`main.js`中引入`global.vue`，通过`Vue.prototype`挂载全局变量，并使用`Vue.use()`注册全局组件。最后，展示了在组件中如何便捷地调用这些全局资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

需求

为了便于vue中全局常量、全局组件的管理，需将它们引入同一个文件并在main.js中注册：
项目文件结构

代码

创建一个用于定义全局常量/方法、引用全局组件的“global.vue”，并在其中暴露全局常量/方法、全局组件：

global.vue

// global.vue
<script>
// 全局常量定义
const cityName = "南京"; // 城市名称

// 全局函数定义
const testFunc = (message) => console.log(message);

// 全局组件引入
import component_title from "./components/component_title/component_title.vue";

export default {
  cityName, // 暴露全局常量
  testFunc, // 暴露全局函数
  component_title, // 暴露全局组件
  install(Vue) {
    // 全局组件注册方法
    Vue.component("component-title", component_title); // 标题组件
  },
};
</script>

在“main.js” （需要确保index.html中引入了main.js）中挂载全局常量/函数，注册全局组件：

main.js

// main.js
import global from "./global.vue";

// 将全局常量/函数挂载到Vue实例上，名称可自定义
Vue.prototype.GLOBAL = global;

// 注册全局组件
Vue.use(global);

在组件中使用全局常量/函数/组件：

// test.vue
<div>
  // 控制台输出"南京"
  {{ this.GLOBAL.testFunc(this.GLOBAL.cityName) }}
  // 可直接使用全局组件
  <component-title />
</div>

参考文档

[1] vue使用全局变量、全局函数
[2] vue定义全局变量、全局方法