This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Applet supports componentized programming, a bit like React, where you can abstract functional modules within a page into custom components, similar to basic component rotograph etc… , which can break up a complex page into multiple modules that are less coupled, facilitating code maintenance.

So how to customize a component, this section records the following ~

1. Create a custom component

A component is also similar to a page, consisting of four files: JSON, WXML, WXSS, JS

You can generate the four files directly by right-clicking on a new folder and creating a Component

Next, in the JSON configuration file, you need to set the Component property to true, which is the default setting created by the above method

Then, in the component’s WXML and WXSS files, you configure the component template in the same way you would write a normal functional module

Write a myHeader component like this

You can write properties and methods in a component JS file, but they must exist in methods

2. Use custom components

Before using a custom component, you need to declare it in a JSON file on the page that uses the component, and you need to configure the component name and file path

Now we have a custom component configured that we can use directly in the WXML file of the page using the myHeader tag

For example, using this component in line 30, the page looks like this

You can see that the myHeader custom component has been successfully rendered on the page

3. Activate component events

The above method is used only for fixed content and is not commonly used, so let’s record rendering components with data

The data transfer is defined in the data attribute, and events are written in the method list

Change the class name active by changing the isActive value of the clicked object to get the target of the click through the event object E

4. Parent passes data to child

The parent refers to the defined tag, and the child refers to the component’s internal data

  1. Parent component delivery
<myHeader aaa = '123'></myHeader>
Copy the code
  1. Subcomponent receive

Receive data in the component’s.js file, and configure the type and default values to receive the data

Component({
  properties: {

      
      aaa: {
      // The type of data to receive
      type: String.// value The default value
      value: ""}}})Copy the code
  1. The child component uses the data passed by the parent component

Use the received data as if it were in its own data

<view>{{ aaa }}</view>
Copy the code

5. Child passes data to parent

Data is passed by registering events, registering events in the child component, triggering custom events in the parent component and passing data to the parent component

Child component JS file

methods: {
    hanldeItemTap(e) {
        // Get the index
        const {index} = e.currentTarget.dataset;
        // Triggers custom events in the parent and passes them to the parent
        this.triggerEvent("itemChange", {
            index
        })
    }
}
Copy the code

Add custom events to the parent component

<Tabs binditemChange="handleItemChange"></Tabs>
Copy the code

Receives data passed by the child component in the parent component

// The custom event receives the data passed by the child component
handleItemChange(e) {
    // Receive the passed parameter
    const {index} = e.detail;
    // Get the original array
    let {tabs} = this.data;
    tabs.forEach((v,i) = >i===index? v.isActive=true:v.isActive=false);
    // Modify the data in data
    this.setData({
        tabs
    })
}
Copy the code

The triggerEvent event of the custom component will trigger the handleItemChange event of the parent component to implement data transfer

When the click event is triggered, the custom event in the triggered parent is passed to the parent

This.triggerevent (" Name of the parent custom event ", parameter to pass)