Организовать регистрацию глобальных компонентов Vue в Vue 3

В 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

main.js

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

const app = createApp({});

app.mount("#app");

index.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?


vue.js vuejs3 vuejs2 vue-component
person Lars Mertens    schedule 05.08.2020    source источник
comment
v3.vuejs.org/guide/migration/   -  person Kos    schedule 21.02.2021

Ответы (2)


arrow_upward
4
arrow_downward

В Vue 3 нет глобальной регистрации. Все привязано к определенному приложению.

Итак, самое близкое, что вы можете получить:

const app = createApp({});

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

app.mount("#app");

Вам нужно будет решить, как лучше всего передавать соответствующие биты между вашими двумя файлами. Например, вы можете сделать index.js плагин.

RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

person skirtle    schedule 05.08.2020

arrow_upward
6
arrow_downward

Я наткнулся на ту же проблему. Чтобы мои компоненты по-прежнему находились во внешнем файле, я сделал свой 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");

Может быть, это кому-нибудь поможет :-)

person Matthias S    schedule 10.09.2020