# Custom components

Starting with Weixin Mini Program base library version {% version ('1.6.3')%}, Mini Programs support concise componentized programming.All custom component related features require base library version {% version ('1.6.3')%} or higher.

Developers can abstract functional modules within a page into custom components for reuse in different pages; It is also possible to split a complex page into several low-coupled modules to help with code maintenance. Custom components are very similar to the base components when used.

# Create custom components

Similar to a page, a custom component is created byjson``wxml``wxss``js4A document is composed.To write a custom component, you first need to write a custom component in thejsonDeclarate custom components in thefile (set thecomponentfield totrueYou can make this group of files a custom component):

{
  "component": true
}

Also, write component templates in thewxmlfile, and add component styles in thewxssfile that are written like pages.See Component Templates and Styles for details and notes.

Code example:

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

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

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

In thejsfile of a custom component, you need to useComponent (]]to register the component and provide the component's property definitions, internal data, and custom methods.

Component property values and internal data are used for rendering the componentwxml, where property values are passed in from outside the component.For more details see Component constructor .

Code example:

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

# Use custom components

Before using a registered custom component, you must first declare a reference in thejsonfile of the page.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 allows custom components to be used in thewxmlof the page just as well as the base components.The node name is the label name of the custom component, and the node properties are the property values passed to the component.

Developer tools 1.02.1810190 and above support declaring the usingComponents field in apagejson. Custom components declared here are considered global custom components that can be used directly on pages or custom components within Weixin Mini Program without having to be declared again.

Code example:

Preview with Developer Tool

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

Thewxmlnode structure of a custom component is inserted into the reference location after it is combined with the data.

# Note

Some details to be aware of:

• Because WXML node label names can only be a combination of lowercase, dashes, and underscores, the label names of custom components can only contain these characters.
• Custom components can also reference custom components in a similar way to how a page refers to a custom component (using theusing Componentsfield).
• 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 that whether or not to useusingComponentsin a page file makes the prototype of thethisobject in the page slightly different, including:

• usingComponentsThe prototype of the page is inconsistent with when not used, i.e.Object.getPrototypeOf (this)The results were different.
• usingComponentsThere are more methods, such asselectComponent.
• For performance reasons, when usingusingComponents,setDatacontent is not directly replicated deeply, that is,`` this.setData ({field: obj})afterthis.data.field = = = obj`.(Deep replication occurs when this value is passed between components.)）

If the page is more complex, it is recommended to retest it when adding or deletingusingComponentsdefinitions.