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

原学程将引见在Vue 三中组织注册Vue齐局组件的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

在Vue 3中组织注册Vue全局组件 教程 第1张

成绩描写

在Vue 二中,您不妨在index.js中应用以下代码在多个文件中齐局注册组件,而没有会使main.js文件收缩

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

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

并在main.js文件中应用

import '@/components'

但是这类办法在Vue 三中仿佛没有实用

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 三中完成雷同的成果?

推举谜底

我也碰到了异样的成绩。为了依然将我的组件搁在内部文件中,我将registerComponents.ts作为组件减载器函数,该函数作为参数吸收它应当向个中添减组件的VUE运用法式。

是以,在我的案例中,我有1个文件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);
}

以及Mymain.ts而后在挂载前应用函数:

const app = createApp(App)
 .use(store)
 .use(router)
 .use(i一8n);

registerComponents(app);

app.mount("#app");

或许这对于或人有赞助:-)

佳了闭于在Vue 三中组织注册Vue齐局组件的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。