Vue3注册全局组件

Vue3中全局注册组件，并统一处理不用一一注册

1.在src下components中创建index.ts

代码如下（示例）：

// 在index.ts中统一注册全局组件
import type { Component } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue';
import Hello from '@/components/Hello.vue'
import World from '@/components/world.vue'
// 如果使用的是 JS 可以删除类型校验
const components: {
    [propName: string]: Component;
} = {
    HelloWorld,
    Hello,
    World
};
export default components;

2.在main.ts中添加如下代码

代码如下（示例）：

// 在此定义组件
import globalComponent from '@/components/index';
// 注册全局的组件
for (const componentItme in globalComponent) {
    app.component(componentItme, globalComponent[componentItme]);
}

3.使用，在任意vue页面直接调用注册的组件名

代码如下（示例）：

<template>
    <div>
        <HelloWorld ref="helloworld" @open="open"></HelloWorld>
    </div>
</template>

---

总结

原创不易，转载请注明出处！！！如果本文对你有所帮助，给个点赞、收藏再走吧。