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. 本站所有资源来源于用户上传和网络，如有侵权请联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！

教热门 » Vue3注册全局组件