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;
// 在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;

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

// 在此定义组件

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>
<template>
    <div>
        <HelloWorld ref="helloworld" @open="open"></HelloWorld>
    </div>
</template>

<template>

    <div>

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

    </div>

</template>

下载说明：

1、本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。

2、如果源码下载地址失效请/联系站长QQ。

3、本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4、本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【源码无忧】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。

5、请您认真阅读上述内容，购买即以为着您同意上述内容。

A盘站 » Vue3注册全局组件