在Vue2中注册全局组件的两种方法详解
更新时间：2022年07月29日 08:45:10 作者：Code_HHX
这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下
第一种：在main.js中直接注册
//引入
import FixedTop from '@/components/FixedTop
//注册为全局组件
Vue.componet('FixedTop',FixedTop)
//页面直接使用
<FixedTop />缺点：如果我们需要注册的全局组件非常多，那么需要一个一个引入，然后分别调用Vue.componet方法，main.js文件会变得很大很臃肿，不好维护，所以当需要注册的全局组件非常多的时候可以采用插件的形式注册
第二种：使用插件的形式注册在 components 目录下新建 index.js 文件
在统一注册的入口文件中
//引入
import FixedTop from '@/components/FixedTop'
import FixedBottom from '@/components/FixedBottom'
export default {
install(Vue){
//注册全局组件
Vue.componet('FixedTop',FixedTop)
Vue.componet('FixedBottom ',FixedBottom )
}
在 main.js 文件注册插件入口
import Components form '@/components'
Vue.use(Components)
扩展：当项目组件较多时，区分开业务型组件和非业务型组件，便易于维护
到此这篇关于在Vue2中注册全局组件的两种方法详解的文章就介绍到这了,更多相关Vue2注册全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue Element前端应用开发之开发环境的准备工作，对Vue感兴趣的同学，可以来学习一下2021-05-05
three.js是一个用于在Web上创建三维图形的JavaScript库,它可以用于创建各种类型的三维场景,包括游戏、虚拟现实、建筑和产品可视化等,下面这篇文章主要给大家介绍了关于如何通过一文带你了解threejs在vue项目中的基本使用,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于Vue开发实践指南之应用入口的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vant如何自定义组件适配iphone底部安全区问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家带来一篇vue.js配合$.post从后台获取数据简单demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
下面小编就为大家分享一篇vue.js或js实现中文A-Z排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue组件watch属性实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下2021-11-11
对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求,比如做一些拦截,处理一些错误等,本篇文章将详细介绍如何封装 axios 请求,需要的朋友可以参考下2023-09-09
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧2018-08-08
最新评论