Vue中自定义全局组件的实现方法-创新互联

前言

有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。今天就解决了一个长期困扰着我的问题，现在记录一下，供日后参考。

涉及知识点是Vue.js官网教程中的插件使用

方法如下：

首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用，而我之前的解决方法就是简单的，哪里需要在哪引用。这无疑增加了许多代码重复。

而在使用Vue.js的一些UI框架的时候则注意到，只需要在项目的入口文件中import这个插件然后在接着Vue.use(‘插件名')。这样就能在整个项目里面使用这个框架中的组件以及方法了。

查阅资料后发现，自定义的组件需要提供一个install方法

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。