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

需求

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

代码

1. 创建一个用于定义全局常量/方法、引用全局组件的“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>

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

main.js

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

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

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

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

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

参考文档

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