above

In the last chapter, I introduced the micro channel small program custom components. In this chapter, I want to talk about another powerful function of the small program — custom events

A custom event is an event that can trigger events of the parent component and modify data in the parent component while triggering events of the child component.

Those of you who have read the mini program’s official tutorial on custom components will feel the same urge to swear as I do…

Because it’s kind of confusing…

But no matter, today here the blogger will explain in detail to explain the micro channel small program custom events.

Case structure

First, I will describe the case project (based on the custom component example in the previous chapter) in case form. Project name: Component Custom child CPT Parent: Logs

component1.png

There is a button in the child CPT that displays the value counter currently stored by the button component.

The parent component logs refers to three CPT child components and has its own first variable, total, in the parent component.

Each time a different button is clicked, the value on the button increases by a different size,

Meanwhile, the total variable records the sum of the values of the three buttons, as shown in the figure:

logs.wxml.png

Writing child components

cpt.wxml

<! This is the internal WXML structure of the custom component --> <view class="inner">
  <button bindtap="_incrementCounter">{{counter}}</button>
</view>Copy the code

There is a button in the child component CPT that adds the click event _incrementCounter, and the button content displays its value Counter

cpt.js

Component({properties: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num: {// num:type: Number, value: 1}}, data: {// {// Here is a custom method that increments the corresponding value _incrementCounter (e) {letnum = this.data.num this.setData({ counter: This.data.counter + num}); // this. TriggerEvent ('increment', {num: num}) // Pass num as an argument to the parent component}}})Copy the code

Writing the parent component

After the child component is written, it can reference logs in the parent component and give it a custom event (don’t forget to reference logs in the parent component’s. Json file)

{
  "navigationBarTitleText": "View startup log"."usingComponents": {
    "component-tag-name": ".. /components/cpt/cpt"}}Copy the code

logs.wxml

<! --logs.wxml--> <view class="container log-list"> <! {{total}} <component-tag-name bindincrement="incrementTotal" num="2"></component-tag-name>
  <component-tag-name bindincrement="incrementTotal" num="3"></component-tag-name>
  <component-tag-name bindincrement="incrementTotal" num="5"></component-tag-name> 
</view>Copy the code

When calling a child component from a parent component, the parent component uses the form BIND: Increment to add the child component, but the parent component uses the form BindIncrement to add the child component. Increment is the name of the event that you passed in triggerEvent when defining the child component.

logs.js

Page({ data: { logs: [], total: 0, // total is used to record the total of three buttons}, Var num = e.daile.num this.setData({total: console.log(e.daile.log)} var num = e.daile.num this.setData({total: console.log)}  this.data.total + e.detail.num }) }, })Copy the code

When you click the three buttons separately, you can see that the values change, and the console output has the corresponding num attribute.

result.png

After the language

Through a simple small case, small program in the custom event is introduced here, learned vue.js guy will find how to feel again vue.js O (╥﹏╥) O in fact, I think the official document is written or good, want to learn small program students can also press the official document on the description of learning.