vue3统一引入组件并在setup函数中使用

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

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

例如，在一个名为 `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` 文件，并在 `setup` 函数中使用：

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

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

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

现在，所有注册的组件都可以在 `setup` 函数中使用了。