# 组件介绍<a name="ZH-CN_TOPIC_0000001063340551"></a>

-   [组件分类](#section154381954142018)

组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

## 组件分类<a name="section154381954142018"></a>

根据组件的功能，可以分为以下四大类：

<a name="table1566416553433"></a>
<table><thead align="left"><tr id="row466410559436"><th class="cellrowborder" valign="top" width="33.23%" id="mcps1.1.3.1.1"><p id="p1166485514432"><a name="p1166485514432"></a><a name="p1166485514432"></a>组件类型</p>
</th>
<th class="cellrowborder" valign="top" width="66.77%" id="mcps1.1.3.1.2"><p id="p146651555174320"><a name="p146651555174320"></a><a name="p146651555174320"></a>主要组件</p>
</th>
</tr>
</thead>
<tbody><tr id="row166525516430"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p116655558432"><a name="p116655558432"></a><a name="p116655558432"></a>基础组件</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p12145036194419"><a name="p12145036194419"></a><a name="p12145036194419"></a>text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart</p>
</td>
</tr>
<tr id="row10665555154310"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p1266535584311"><a name="p1266535584311"></a><a name="p1266535584311"></a>容器组件</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p18127648144417"><a name="p18127648144417"></a><a name="p18127648144417"></a>div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog</p>
</td>
</tr>
<tr id="row3665175512436"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p196651055164310"><a name="p196651055164310"></a><a name="p196651055164310"></a>画布组件</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p066545564313"><a name="p066545564313"></a><a name="p066545564313"></a>canvas</p>
</td>
</tr>
</tbody>
</table>