组件的创建与使用和好处

uniapp组件

创建组件

1.新建一个项目或者是在已有项目,在项目里面新建一个目录,目录的名字叫做components

2.如果命名正确的话就可以右击新建,就会有个新建组件

如果没有新建组件的话可能就是命名不正确

3.右击之后新建

输入组件名称,勾选创建同名目录,然后点击创建

4.创建好之后,我们可以再里面放一张图片也就是<image></image>

5.使用这个组件,可以在别的页面直接<组件名称></组件名称>,这样在另一个页面就可以直接把组件里的东西直接显示过来,如图下所示

使用组件

1.这些组件不一定是固定的,可以灵活替换里面的值,比如上面放的是图片,那么我们可以把图片给替换掉,之前的组件只是放了一张图片,我们需要进行修改,如下

2.在另一个页面使用这个组件,如下

在别的页面使用这个组件的时候只需要在里面给对应的属性给上值就行了,还可以用变量把这个值存储在赋给这个属性,如下

这样跟上面不同的地方在于,如果要使用变量的话要给属性前面加上:,也就是v-bind:,其实效果是一样的,只不过看起来不会那么臃肿

总结

组件可以在同一个页面多次使用,如下

这样子可以节省代码.

使用组件的好处有:

1、组件是独立和可复用的代码组织单元。组件系统是vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；

2、组件化开发能大幅度提高应用开发效率、测试性、复用性等；

3、能让 web 前端代码实现“高内聚 低耦合”，使得前端开发的过程变成搭积木的过程。