# Custom Components

Mini Program base library version 1.6.3 Initially, Mini Programs support concise componentized programming. Base library version required for all custom component related features 1.6.3 Or higher.

Developers can abstract functional modules within a page into custom components that can be reused in different pagesYou can also split complex pages into multiple, low-coupling modules, which helps with code maintenance. Custom components are very similar to the base components when used.

# Create custom components

Similar to a page, a custom component consists of json wxml wxss js It consists of four documents. To write a custom component, you first need to write it in the json File to make a custom component declaration that will component Field is set to true This set of files can be made a custom component):

{
  "component": true
}

At the same time, also in wxml File to write a component template in the wxss Component styles are added to the file, and they are written in a manner similar to that of the page. See details and precautions Component Templates and Styles 。

Code example:

<!-- This is the internal WXML structure of a custom component -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

/* The style here applies only to this custom component */
.inner {
  color: red
}

Note: ID selectors, attribute selectors, and label name selectors should not be used in component wxss.

In the custom component's js File, you need to use the Component() To register a component and provide its property definitions, internal data, and custom methods.

Component's property values and internal data will be used by the component wxml Where property values are passed in from outside the component. See more details at Component constructor 。

Code example:

Component({
  properties: {
    // The innerText attribute is defined here. The attribute value can be specified when the component is used
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // Here's some component internal data
    someData: {}
  },
  methods: {
    // Here is a custom method
    customMethod: function(){}
  }
})

# Using custom components

Before using a registered custom component, the first step is to use the json File for a reference declaration. At this point, you need to provide the label name of each custom component and the corresponding custom component file path:

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

This way, on the page of the wxml You can use custom components just as you would the base components in. The node name is the label name of the custom component, and the node attribute is the attribute value passed to the component.

Developer Tools 1.02.1810190 The above version is supported in app.json Statement in usingComponents Field, where custom components declared are treated as global custom components and can be used directly in pages or custom components within Mini Programs without declaration.

Code example:

{% Minicode ('OMfVAKmZ6KZT') %}

<view>
  <!-- The following is a reference to a custom component -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

Of the custom component wxml After the node structure is combined with the data, it is inserted into the reference location.

# Note

Some details to note:

• because WXML Node label names can only be a combination of lowercase letters, dashes, and underscores, so custom component label names can only contain these characters.
• A custom component can also refer to a custom component in a way similar to the way a page refers to a custom component using usingComponents Field).
• The root directory name of the custom component and the item where the page is located cannot be prefixed with "wx-," otherwise it will be reported incorrectly.

Note whether or not to use in the page file usingComponents This will make the page. this Objects with slightly different prototypes, including:

• use usingComponents The prototype of the page is not consistent with when not in use, i.e. Object.getPrototypeOf(this) Different results.
• use usingComponents There are more ways, such as selectComponent 。
• For performance reasons, use the usingComponents When, setData The content will not be copied directly, i.e. this.setData({ field: obj }) after this.data.field === obj Deep replication occurs when this value is passed between components. ）

If the page is more complex, add or delete usingComponents It is recommended to retest the definition of a segment.