Vue 3 中组织注册Vue全局组件

Question

在 Vue 2 中，您可以通过在index.js 中使用以下代码在多个文件上全局注册组件，而不会膨胀main.js文件

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

并在main.js文件中使用

import '@/components'

---

但是这种方法在 Vue 3 中似乎对我不起作用

主文件

import { createApp } from 'vue';
import '@/components'

const app = createApp({});

app.mount("#app");

索引.js

import Vue from 'vue' // doesn't work with import { createApp } from 'vue' too
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

如何在 Vue 3 中获得相同的结果？

Answer 1

我偶然发现了同样的问题。为了将我的组件保留在外部文件中，我将我registerComponents.ts的组件设置为组件加载器函数，该函数作为参数接收它应该将组件添加到的 vue 应用程序。

所以就我而言，我有一个registerComponents.ts看起来像这样的文件

import { App } from "vue";

// import components
import button from '@/components/Button.vue';

// register components
export const registerComponents = (app: App): void => {
    app.component('tw-button', button);
}

然后我main.ts在安装之前使用该功能：

const app = createApp(App)
    .use(store)
    .use(router)
    .use(i18n);

registerComponents(app);

app.mount("#app");

也许这对某人有帮助:-)