vue3统一引用各个组件

在 Vue 3 中，可以使用 `app.component` 方法来注册全局组件，以便在任何 Vue 实例中使用它们。

为了统一引用各个组件，可以在一个单独的文件中注册所有组件，然后在需要使用这些组件的组件中引入该文件并使用需要的组件。

例如，在一个名为 `globalComponents.js` 的文件中，可以按以下方式注册全局组件：

import { defineComponent } from 'vue'
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export default {
  install(app) {
    app.component('component1', Component1)
    app.component('component2', Component2)
  }
}

然后，在需要使用这些组件的组件中，可以引入 `globalComponents.js` 文件，并使用需要的组件：

<template>
  <div>
    <component1 />
    <component2 />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import GlobalComponents from './globalComponents.js'

export default defineComponent({
  components: {
    // 在这里注册组件，以便在 template 中使用
    ...GlobalComponents
  }
})
</script>

现在，所有注册的组件都可以在模板中使用了。可以通过在 `components` 中传入一个包含所有组件的对象来实现统一引用各个组件。