组件介绍
====

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

开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见[自定义组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-js-custom-components)。

#### 组件分类

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

| 组件类型 | 主要组件 |
| :-- | :-- |
| 容器组件 | [badge](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-badge)、[dialog](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-dialog)、[div](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-div)、[form](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-form)、[list](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-list)、[list-item](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-list-item)、[list-item-group](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-list-item-group)、[panel](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-panel)、[popup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-popup)、[refresh](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-refresh)、[stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-stack)、[stepper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-stepper)、[stepper-item](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-stepper-item)、[swiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-swiper)、[tabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-tabs)、[tab-bar](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-tab-bar)、[tab-content](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-container-tab-content) |
| 基础组件 | [button](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-button)、[chart](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-chart)、[divider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-divider)、[image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-image)、[image-animator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-image-animator)、[input](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-input)、[label](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-label)、[marquee](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-marquee)、[menu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-menu)、[option](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-option)、[picker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-picker)、[picker-view](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-picker-view)、[piece](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-piece)、[progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-progress)、[qrcode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-qrcode)、[rating](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-rating)、[richtext](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-richtext)、[search](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-search)、[select](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-select)、[slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-slider)、[span](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-span)、[switch](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-switch)、[text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-text)、[textarea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-textarea)、[toolbar](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-toolbar)、[toolbar-item](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-toolbar-item)、[toggle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-toggle) |
| 媒体组件 | [video](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-media-video) |
| 画布组件 | [canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvas) |
| 栅格组件 | [grid-container](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-grid-container)、[grid-row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-grid-row)、[grid-col](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-grid-col) |
| svg组件 | [svg](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg)、[rect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-rect)、[circle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-circle)、[ellipse](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-ellipse)、[path](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-path)、[line](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-line)、[polyline](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-polyline)、[polygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-polygon)、[text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-text)、[tspan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-tspan)、[textPath](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-textpath)、[animate](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-animate)、[animateMotion](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-animatemotion)、[animateTransform](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-svg-animatetransform) |