Custom Components for Mini Programs

First, the creation and reference of components

1. Create components

insert image description here

2. Reference components

insert image description here

3. Locally referenced components

.jsonThe way the component is referenced in the page's configuration file, 叫做“局部引用”. The sample code is as follows:

4. Global reference components

app.jsonThe way components are referenced in the global configuration file , 叫做“全局引用”. The sample code is as follows:

5. Global references VS local references

insert image description here

6. The difference between components and pages

insert image description here

Two, style

1. Component style isolation

insert image description here

2. Notes on component style isolation

insert image description here

3. Modify the style isolation option of the component

By default, custom components 样式隔离特性are enabled 防止组件内外样式互相干扰的问题. But sometimes, we want to be able to control the style inside the component from the outside world. At this time, we can styleIsolationmodify the style isolation option of the component. The usage is as follows:

4. Optional value of styleIsolation

insert image description here

3. Data, methods and attributes

1. data data

In the applet component, 用于组件模板渲染, 私有数据needs to be defined data 节点in , the example is as follows:

2. methods method

In the applet component, 事件处理函数and 自定义方法need to be defined in methods节点, the sample code is as follows:

3. properties attribute

In the applet component, properties is the external property of the component, 用来接收外界传递到组件中的数据, the sample code is as follows:

4. The difference between data and properties

In the components of the applet, the usage of the properties attribute and the data data are the same, they are both 可读可写, except:
- data is more inclined to存储组件的私有数据
- properties are more inclined to存储外界传递到组件中的数据

5. Use setData to modify the value of properties

Since data 数据there properties 属性is no difference in essence, the value of the properties property can also be used for page rendering, or use setData to reassign the properties in properties, the sample code is as follows:

4. Data Listener

1. What is a data listener

Data listeners are used for 监听和响应任何属性和数据字段的变化，从而执行特定的操作. It works like in vue watch 侦听器. In the applet component, the basic syntax format of the data listener is as follows:

2. Basic usage of data listener

The UI structure of the component is as follows:
The component's .js file code is as follows:

3. Listen for changes in object properties

The data listener supports monitoring changes in 单个or in the object 多个属性. The sample syntax is as follows:

5. Data Listener - Case

1. Case Effect

insert image description here

2. Render the UI structure

insert image description here

3. Define the event handler function of the button

insert image description here

4. Monitor the change of the specified property in the object

insert image description here

5. Listen to the changes of all properties in the object

If there are too many properties that need to be monitored in an object, for convenience, you can use them 通配符 ** in 监听the object 所有属性的变化. The sample code is as follows:

6. Pure data field

1. What is a pure data field

insert image description here

2. Rules of use

In the options node of the Component constructor, specify pureDataPatternas one 正则表达式, and the field whose field name matches this regular expression will become a pure data field. The sample code is as follows:

3. Use pure data fields to transform the data listener case

insert image description here

Seven, component life cycle

1. All life cycle functions of components

All life cycles available for applet components are shown in the table below:

2. The main life cycle function of the component

insert image description here

3. lifetime node

In the applet component, the lifecycle function can be directly defined in the first-level parameter of the Component constructor, and can be declared in the lifetimes field ( ) 这是推荐的方式，其优先级最高. The sample code is as follows:

8. The life cycle of the page where the component is located

1. What is the life cycle of the page where the component is located

Sometimes, 自定义组件的行为依赖于页面状态的变化, is needed at this time 组件所在页面的生命周期.
For example: whenever the show lifecycle function of the page is triggered, we want to be able to regenerate a random RGB color value.
In a custom component, there are three life cycle functions of the page where the component is located, namely:

insert image description here

2. pageLifetimes node

The lifecycle function of the page where the component is located needs to be defined in the pageLifetimes node. The sample code is as follows:

3. Generate random RGB color values

insert image description here

9. Slot

1. What is a slot

insert image description here

2. Single slot

In the applet, only one <slot> is allowed to be used in each custom component by default, and this limit on the number is called a single slot.

3. Enable multiple slots

In the custom component of the applet, if you need to use multiple <slot> slots, you can enable it in the component's .js file in the following way.
The sample code is as follows:

4. Define multiple slots

Multiple <slot> tags can be used in a component's .wxml to namedifferentiate different slots. The sample code is as follows:

4. Using multiple slots

When in use 带有多个插槽的自定义组件, it needs slot 属性to be used to insert nodes into different <slot>s. The sample code is as follows:

10. Communication between parent and child components

1. Three ways of communication between parent and child components

insert image description here

2. Property binding

属性绑定For implementation 父向子传值, and 只能传递普通类型的数据, methods cannot be passed to child components. The sample code of the parent component is as follows:
Subcomponents are propertiesin nodes 声明对应的属性并使用. The sample code is as follows:

3. Event binding

insert image description here

Step 1: In 父组件the js, define a function, which is 即将passed to the child component in the form of a custom event
Step 2: In 父组件wxml, 自定义事件pass the function reference defined in step 1 to the subcomponent through the form.
Step 3: In 子组件the js, by calling this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) , send the data to the parent component.
Step 4: In 父组件the js, e.detailget the data passed by the subcomponent through .

4. Get the component instance

It can be called in the parent component this.selectComponent("id或class选择器") to obtain the instance object of the child component, so as to directly access any data and methods of the child component. One needs to be passed in when calling 选择器, for example this.selectComponent(“.my-component”).

Eleven, behaviors

1. What are behaviors?

insert image description here

2. How behaviors work

insert image description here

3. Create behavior

Call Behavior(Object object)the method to create a shared behaviorinstance object for all components to use:

4. Import and use behavior

In the component, use require() the method to import the required behavior, 挂载后即可访问 behavior 中的数据或方法, the sample code is as follows:

5. All available nodes in behavior

insert image description here

6. Overriding and combining rules for fields with the same name*

insert image description here