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>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容