全局注册组件，可以让所有的页面都能够使用这个组件 但是如果有很多的组件都需要全局注册，那么在 mian.js 中就要书写很多注册组件的内容

// 全局导入 PageTools import PageTools from '@/components/PageTools' // 注册 PageTools Vue.component('PageTools',PageTools)

那么，在 Vue 项目中，我们可以自定义组件，以插件化的注册方式做全局注册。任何一个 .vue 文件都可以使用这个组件 比如像 element-ui 一样使用 Vue.use( ) 方法来使用

具体实现方法： 提供统一注册组件插件的入口文件：src/components/index.js在components 同一目录下建立 index.js 文件，在这个文件中使用 install 方法来全局注册组件 // 全局导入 PageTools UploadImg ... import PageTools from '@/components/PageTools' import UploadImg from '@/components/UploadImg' // 对象定义法 const componentPlugin = { install(Vue){ //* 第一个参数以 name 作为组件名称，第二个参数为组件本身 Vue.component(PageTools.name,PageTools) Vue.component(UploadImg.name, UploadImg) // ... } } // 导出组件 export default componentPlugin 在入口处进行注册 src/main.js Vue.use 注册使用自己的插件模块 // 导入 componentPlugin import componentPlugin from "@/components"; // 注册 componentPlugin Vue.use(componentPlugin); 那么，为什么要进行插件优化？

因为有可能还有很多的全局组件都需要同等的操作，这个 main.js 就会变得很大，不够精简

实现的效果？

Vue.use(componentPlugin) => 把 components 中的所有组件都统一完成了全局注册

插件的运行流程？ Vue.use(插件)插件中，install 方法会自动执行并且拿到一个实参 Vue执行 install 方法中的具体逻辑Vue.component (组件)组件被全局注册

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。