---
title: Introduction
---


You can abstract functional modules on a page into custom components, so they can be reused on other pages. Also, you can split complex pages into multiple low-coupling modules to facilitate programming. Custom components are used in a way similar to base components.

## Create a custom component

Similar to a page, a custom component consists of four files: `json`, `tyml`, `tyss`, and `js`. To create a custom component, you first need to declare the custom component in the `json` file, and set the `component` field to `true`. This way, this set of files becomes custom components.

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

Meanwhile, the component template should be written in the `tyml` file, and the component style should be added to the `tyss` file. Both files are written in a way similar to writing a page. For more details and points for attention, see Component Templates and Styles.

**Sample code:**

```xml
<!-- The TYML structure in a custom component looks like this -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
```

```css
/* The styles here apply only to this custom component */
.inner {
  color: red;
}
```

In the `js` file of the custom component, you need to use `Component()` to register the component and provide the property definition, internal data, and custom methods of the component.

The property value and internal data of the component will be used for the rendering of the component `tyml`. The property value can be passed in from outside the component. For more information, see `Component` Constructor.

**Sample code:**

```js
Component({
  properties: {
    // The innerText property is defined here, and the property value can be specified when the component is used
    innerText: {
      type: String,
      value: 'default value',
    },
  },
  data: {
    // This is some internal data of the component
    someData: {},
  },
  methods: {
    // This is a custom method
    customMethod: function () {},
  },
});
```

## Use a custom component

Before using the registered custom component, you must first make a reference declaration in the `json` file of the page. You need to provide the tag name of each custom component and the corresponding file path:

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

This way, the custom component can be used in the `tyml` of the page just like the base component. A node name is the tag name of a custom component, whereas the node property is the property value passed to the component.

**Sample code:**

```xml
<view>
  <!-- The following code shows how to reference a custom component -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>
```

The `tyml` node structure of the custom component will be inserted into the reference location after the structure and respective data are combined.