记录vue的component使用(可用于低代码开发)

168 阅读1分钟

一、在VUE官方中的解释

如图中解释很明显,component它的作用用于动态组件的渲染,我们可配置一个相关的json或者js文件,在某个路由里引入,这样就不必在一个页面里引入多个组件。

接下来,我将记录用数组去渲染动态组件。

老规矩,先讲我的前端环境,避免版本冲突,前端环境如下:

Node(14.17.5)、Npm(6.14.14),Vue-cli(4.5.15),Vue(2.6.14)

1.jpg

一、创建组件

在项目里,本人用的是ElementUi组件库。

在项目根目录下创建coderComponents文件夹,用来置放创建的组件。

22222.png  

1、新建一个index.js,引入组件并以模块的形式抛出。

代码如下:

2、举个例子,【elRate组件】,props中的config是该组件配置信息。

444.jpg

注意:组件的name不能和ElementUi组件库的name一样,在图中el-rate组件,它的name是elRate,那么这里的name不能取名为elRate,取名elRate的话会被当成ElementUi组件库的el-rate组件解析

三、引入组件

注意:在代码里,具体的config需要根据项目实际情况为主,一切以项目实际情况为主

初始的组件库通过本地配置好的json或者js来引入,这个一般由前端去配置修改,当然保存到数据库也可以,但是最好能可视化去修改初始的组件库

页面动态组件话通过请求后端接口来获取组件数据

四、总结****

个人观点:Component适用于低代码平台页面设计开发,它将减少大量的代码量。 如有不规范、需要优化地方、好建议请留言给我。

一起学习进步!