---
title: 原生小程序组件介绍
summary: "介绍自定义组件的文件结构、创建方法及在页面中引用组件的方式。"
questions:
  - 自定义组件一般包含哪些文件？
  - 如何声明一个自定义组件的配置文件？
  - Component() 函数的作用是什么？
  - 如何在页面中引用和使用自定义组件？
  - usingComponents 支持在哪些配置文件中声明？
  - 自定义组件可以发布到哪里以便在不同小程序中复用？
  - 自定义组件注册时可以定义哪些内容？
---

# 组件介绍

组件功能可将需要复用的功能模块抽象成自定义组件，从而在不同页面中复用，更可以将自定义组件发布到 NPM 上，从而在不同小程序中进行复用。

每个小程序组件一般包含以下文件。

- `[componentPath].js`：注册组件
- `[componentPath].tyml`：组件结构
- `[componentPath].json`：组件配置
- `[componentPath].tyss`：组件样式（可选）
- `[componentPath].rjs`：组件`RJS`渲染文件（可选）

## 创建自定义组件

### 组件配置

必须存在组件配置文件，并且进行 `"component": true` 声明。

```js
// 文件：/components/foo/index.json
{
  "component": true
}
```

### 注册组件

小程序组件必须使用 [Component() 函数](/cn/miniapp/develop/miniapp/framework/api/component) 注册且只注册一次。

```js
// 文件：/components/foo/index.js
Component({
  options: {}
  data: { x: 1 }, // 组件内部数据
  lifetimes: {}, // 组件生命周期
  methods: {
    // 自定义方法
    handleTap() {
      this.setData({ x: this.data.x + 1 }); // 可使用 setData 改变内部属性
    },
  },
});
```

更多详细内容，请参考 [Component 函数](/cn/miniapp/develop/miniapp/framework/api/component)。

### 组件结构

```html
<!-- 文件：/components/foo/index.tyml -->
<view> HI, My Component </view>
```

配合样式文件定制组件的显示效果。

## 使用组件

创建组件后，通过页面配置或全局配置（`app.json`）中的 `usingComponents` 进行引用。

```json
{
  "usingComponents": {
    "foo": "/components/foo/index"
  }
}
```

引用后即可在对应的页面结构中，通过 `<foo />` 标签进行使用。

```html
<view>
  <text>使用自定义组件</text>
  <foo></foo>
</view>
```