如何在Vue.js中全局注册自定义类 实现任意组件内均可实例化调用

共有两种常用实现方式，可根据你的项目场景选择：

方案一：封装为独立ES模块（最推荐） #

该方式支持按需导入，不会污染全局作用域，也支持打包工具的Tree Shaking优化：

1. 新建独立类文件 src/models/Customer.js，写入如下内容并导出：

// src/models/Customer.js
export default class Customer{
  constructor(){
    // 建议初始化默认值，避免Vue响应式检测失效
    this.id = null;       
    this.name = null;
    this.email = null;
    this.username = null;       
    this.password = null;
  }
  // 可在此处扩展该类的专属方法，例如表单校验、属性格式化等
}

2. 任意需要用到该类的组件中直接导入使用即可：

import Customer from '@/models/Customer.js'

export default {
  name: 'TestComponent',
  data()
  {
    return{
      MainCustomer: new Customer()      
    }
  },
}

方案二：全局挂载（适合高频使用场景） #

如果项目中大量组件都需要用到该类，不想每次重复导入，可以将类挂载到Vue全局属性上：

Vue2 配置 #

在项目入口文件 src/main.js 中添加如下代码：

import Vue from 'vue'
import Customer from '@/models/Customer.js'
// 挂载到Vue原型，所有组件可通过this.$Customer访问类
Vue.prototype.$Customer = Customer

组件内无需导入，直接使用：

export default {
  name: 'TestComponent',
  data()
  {
    return{
      MainCustomer: new this.$Customer()      
    }
  },
}

Vue3 配置 #

在项目入口文件 src/main.js 中添加如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import Customer from '@/models/Customer.js'

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.$Customer = Customer
app.mount('#app')

组件内（选项式API）使用方式和Vue2完全一致，组合式API场景下更推荐直接导入方案一的模块使用。

内容的提问来源于stack exchange，提问作者Sarwar Hasan