---
title: 介绍
summary: "介绍自定义组件的创建和使用方法，包括组件文件结构、Component() 注册及在页面中引用组件。"
questions:
  - 自定义组件由哪几个文件组成？
  - 如何在 JSON 文件中声明自定义组件？
  - 自定义组件的 js 文件中使用什么方法注册组件？
  - 组件的属性值可以由谁传入？
  - 如何在页面的 JSON 文件中引用自定义组件？
  - 页面的 tyml 中如何使用自定义组件？
  - 自定义组件与基础组件在使用上有什么相似之处？
---



开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

## 创建自定义组件

类似于页面，一个自定义组件由 `json`、`tyml`、`tyss` 和 `js` 4 个文件组成。要编写一个自定义组件，首先需要在 `json` 文件中进行自定义组件声明，将 `component` 字段设为 `true`，可将这一组文件设为自定义组件。

```json
{
  "component": true
}
```

同时，还要在 `tyml` 文件中编写组件模板，在 `tyss` 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项，参见 组件模板和样式。

**示例代码：**

```xml
<!-- 这是自定义组件的内部TYML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
```

```css
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}
```

在自定义组件的 `js` 文件中，需要使用 `Component()` 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 `tyml` 的渲染，其中，属性值可由组件外部传入。更多细节参见 `Component` 构造器。

**示例代码：**

```js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {},
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {},
  },
});
```

## 使用自定义组件

使用已注册的自定义组件前，首先要在页面的 `json` 文件中进行引用声明。此时，需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

```json
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
```

这样，在页面的 `tyml` 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

**示例代码：**

```xml
<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>
```

自定义组件的 `tyml` 节点结构在与数据结合之后，将被插入到引用位置内。