Vue3注册全局组件

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

图片[1]-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>
文章版权声明 1、本网站名称:朝晞小屋
2、本站永久网址:https://www.zxiyun.com/
3、更多有趣网站:http://dh.zxiyun.com/
4、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ2604140139进行删除处理。
5、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容