Vue封装组件是全球注册和引用的

在vue接触到更多的人之后，您可能能够自己封装组件。想象一下，把每个页面的所有功能模块拆分成组件，然后请求后台数据传入或者自己模拟数据，是多么的方便。

每当我们需要修改它时，我们只需要维护那个功能组件，而不是这个功能，我们只需要从页面中删除这个组件的引用。

所以不要废话了，我们来看看如何全局注册，一键介绍(类似元素ui的所有介绍)。

我不会详细讨论如何打包组件。

参考vue官网的做法：vue官网全球注册

1.定期判断路径和文件名，获取所有组件并全局注册(可以直接在main.js中编写，但为了标准化和后期的可维护性，我们创建了一个新的单独的js文件来编写)

(1)main.js引入了所有定制的打包组件

从“Vue”导入Vue；从“echart”导入echart；从“”导入应用程序。/app . vue '；从“”导入路由器。/router '；从“”导入存储。/store '；“进口”。/plugins/element '；//导入时间戳序列化’。/plugins/date format '；//引入公共样式导入公共自’。/assets/CSS/public . CSS '；//导入所有自定义打包组件。/components/common components/global components '；从“”导入启动。/startup '；//使用公共风格vue . use(Public)；vue . config . production tip=false；Vue.prototype. $ echarts=echartsfunction vue() { new Vue({路由器、商店、render: h=h(App) })。$ mount(' # app ')；}启动(vue、路由器)；(2)全局组件的GlobalComponents.js

这里需要安装两个插件upperFirst和camelCase

下面是组件相对于这个文件的路径，因为我打包的组件和这个js文件在同一个级别，所以直接就可以了。

然后是是否查询子目录，也就是在这个路径下新建文件夹，把组件分开，那么就会嵌套很多层，查询子目录可以帮助我们轻松找到。

然后是正则表达式，因为我所有的组件名都以Rdapp开头。让我们在这里看看每个人的文件名。如果不需要，就删除之前的Rdapp。

那么下部可以保持不动。

从“Vue”导入Vue；从“lodash/upperFirst”导入upper first；从“lodash/camelCase”导入camel case；const require component=require . context(//其组件目录的相对路径。//是否查询其子目录true，//匹配基本组件/Rdapp[A-Z]文件名的正则表达式\w \。(vue|js)$/，)；requirecomponent.keys()。foreach((文件名)={//获取组件配置const component config=require component(文件名)；//获取PascalCase名称const组件名称=upper first(camel case)(//获取文件名。拆分('/')。pop()。替换(/\。\ w $/，'')，)；//全局注册组件Vue.component(componentName，//如果这个组件选项是通过' export default '导出的，//那么`。默认`将优先使用，//否则，返回使用模块的根目录。component config . default | | component config，});2.组件的打包和命名

这里新建了一个文件夹，其中js文件是上面的配置文件，用于全局注册和引用，然后下面是封装的组件，请使用驼峰命名方法。

3.组件介绍

组件介绍使用-语法，由每个驼峰标记，如AccBdd的名称，介绍为acc-bdd/acc-bdd

模板div class=' ER-left-box ' rdapp-animation-group animation类型='从左到右'！-标题一-RDA PP-动画-物品速度='快RDA PP-title :文本样式='左数据.左标题1 ' class=' header-title '/RDA PP-title/RDA PP-动画-物品！-火灾警告-RDA PP-动画-物品速度='慢RDA PP-预警：文本样式=' HandleEventInfo '/RDA PP-预警/RDA PP-动画-物品！-标题二-RDA PP-动画-物品速度='快RDA PP-title :文本样式='左数据.左标题2 ' class=' header-title '/RDA PP-title/RDA PP-动画-物品！-描述-RDA PP-动画-项目速度='正常RDA PP-描述： textstyle=' {描述： handleeventinfo。描述} '/RDA PP-描述/RDA PP-动画-项目！-视频-RDA PP-动画-项目速度='慢RDA PP-视频参考='视频：摄像机编号=' 0 '/RDA PP-视频/RDA PP-动画-项目/RDA PP-动画-组/div/模板这样我们就完成了组件的封装以及所有组件的全局注册和使用，便于我们的开发以及后期可维护性。

这里附带一个组件的封装写法：

这里封装的是一个标题的组件，为了方便用户传参，使用了对象作为参数，通过计算属性以及对象。分配方法，可以更方便的合并用户传递的参数，即如果用户只在对象中传入了文本属性，那么其他属性就会使用默认值，这样无疑提高了组件的丰富性。

模板div class=' BgTitle-box ' : style=' GetStyle ' { GetStyle。文本} }/div/模板脚本导出默认{ name : ' RdappBgTitle '，props: { textStyle: Object，}，computed : { getStyle(){ return Object。分配({ text : '基本信息，width: '300px '，height: '54px '，lineHeight: '54px '，textAlign: 'center '，fontSize: '16px '，fontColor: '#fff '，}，这个。text style)；}, },};/script样式作用域BgTitle-box{ background: url('././static/img/prepare judge/assessment e。png ')无重复中心中心；}/样式好了，以上就是组件封装以及全局注册引用的方法，希望对你有帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。