我们之前的章节讲了数据绑定，数据驱动视图，这一节我们讲另一个核心：组件。

组件是什么？看看下面这张图

image.png

简单来说，组件就是组成视图层的组成单位，大到一个页面，小到一个按钮，都可以是一个组件。不要把组件想复杂了，

在小程序官方文档中有一栏是组件栏，专门展示了小程序封装的组件

图片

上面的组件你看着是不是跟传统html的标签一样呢？ 现在的框架都实行组件化，那这些也就自然而然称为组件了，大家要习惯这个概念。

图片

上面的图是一个列表，如果按照传统来看的话，红色框出来的都是一个组件，整个页面就是最大的组件了。我们看看代码吧

我们先创建一个文件夹，右键新建page，生成了四个文件，js，json，wxml，wxss，此时app.json中已全局配置好页面的文件路径。这部分前几章没有讲到，这里粗略的带过一下。

图片

view本身就是一个组件，还有image组件，list_item这一层又是由多个小组件组合成的大组件了。

看到上面的代码，有没发现，每一个list_item的结构都是一样的，是不是可以简洁一下代码呢？这就要用到我们第3节讲到的wx:for控制属性了，接下来就看看用了wx:for后，代码有什么变化。

在data中定义数据：

图片

在组件上使用 wx:for 控制属性绑定list_data数组，即可使用数组中各项的数据重复渲染该组件

图片

对比上一张图，这样代码简洁多了吧，以后只要有这种有数据重复的内容，都这么处理就对了。

小结一下，页面元素皆是组件，实战时，有合适的就用小程序封装好的组件，没有就用view组件来组合使用，小程序没有封装或不符合项目使用的，就自定义组件（自定义组件，我在下一小节会详细讲解，我们是要写大项目的前端，自定义组件，不能不会啊！

欢迎有兴趣的朋友关注 "趣味web前端教程" 公众号，里面是写点前端的内容和大家分享学习的。