vue3如何将通用组件注册成全局组件

一、问题重现

我们用过vue的人都知道会有一个components文件夹用来存放我们的通用组件：

 这里我的通用组件就有四个，但是有一些是使用评率比较高的，如果很多地方要使用我还得导入相同的组件，写的都是一样的代码

import Imageview from './ImageView/index.vue'
import Xtsku from './Xtsku/index.vue'

那我为什么不化简一下，或者说我就做一些封装，写一些逻辑函数，最好的就是将他们都升级为全局组件，来看看我是怎么做的。

二、使用组件注册机制

不妨碍components文件夹下面创建一个index文件：

我们将频繁使用到的组件在这个文件里全部导入一遍:

import Imageview from './ImageView/index.vue'
import Xtsku from './Xtsku/index.vue'
 export const componentplugin = {
    install(app){
        app.component('Imageview',Imageview)
        app.component('Xtsku',Xtsku)
    }
 }

然后通过install这个函数将这些组件按照插件的注册当时升级成全局组件就可以了；

在main文件里面：

import {componentplugin} from '@/components'
app.use(componentplugin)

这样就可以全局拿到这几个通用组件了。

三、使用方法

无论那个组件：

  <ImageView :image-list="goods.mainPictures"/>

咋们直接用就可以了，直接写元素都是一样的效果；

四、提重点

最主要的就是要知道如何写这个install函数，其实这个直接写在main文件里面也是一样的，只不过这里将它模块化分开了，更便于后期维护和管理；

到此这篇关于vue3如何将通用组件注册成全局组件的文章就介绍到这了,更多相关vue3注册全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！