手机网站设计制作服务媒体发稿网

一、问题重现

我们用过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文件里面也是一样的，只不过这里将它模块化分开了，更便于后期维护和管理；