Information transmission and function calls between WeChat mini program pages and components

In this article, I will explain the relevant content from the following perspectives based on my own development experience.

1. How to pass data from page to component
2. How components pass data to the page
3. How does the page call the function in the component?
4. How do components call functions within a page?
   

1. How does the page pass data to the component?

The most common and standardized way is to set the data listener observer.

​ Assume that the component sc is introduced in the page

"usingComponents": {
    "sc":""
 }

To configure a listener to monitor changes in the data list on the page, the component is written in the page as follows:

<sc
list="{{list}}"
>
</sc>

The listener in the component is written as follows. Every time the value of `list` in the page changes, the `observer` listener will be triggered and the changed value will be printed out.

properties:
    list:{
      type:Array,
      observer: function (newVal, oldVal){
        console.log(newVal)
      }
    }
}

​ Similarly, in addition to dynamic value transmission, this method can also directly pass in static values, that is, there is no need to call the obeserver listener. In the component, you can directly use this.properties.* to get the values ​​​​in properties (* represents the name of each property value).

2. How do components pass data to the page?

Since components can set listeners to monitor page data changes to achieve the effect of data transmission, pages can also use listeners to monitor information transmission triggered by components.

Still taking the above component as an example, how to transmit information to the page?

​ Configure component listeners in the page

ComponentListener(e){
    let info = e.detail;
 }

​ Component selects the event and binds the listener

<sc
bind:listener="ComponentListener"
> 
</sc>

To pass input from a component to a page, you only need to trigger the corresponding event in the component. e.detail is the data passed.

 this.triggerEvent('listener',{func,tid});

3. How does the page call the function in the component

​ Suppose we introduce and use a component comment-bottom, which contains a function handleCloseInput that needs to be triggered in a certain logic.

If you want to use the functions in a component, you must configure a unique id for the component so that you can select the component through DOM operations on the page and call the functions in the component.

<comment-bottom id="commentBottom"></comment-bottom>

The calling logic of the function in the component on the page is as follows:

this.commentBottom = this.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();

4. How does a component call a function on a page?

The above method of transferring data to a page actually calls a function in the page. We can understand the logic and usage as a function mapping.

<component bind:componentfunc="pagefun"></component>

When a trigger is used to trigger componentfunc, the pagefunc in the page will be triggered through the bind: function mapping relationship.

Secondly, you can also call functions within a page through the page stack. The component does not occupy the stack space of the page, so you can use getCurrentPages in the component to obtain the data and methods of the corresponding page.

var allpages = getCurrentPages(); //Get all page data var nowpage = allpages[allpages.length - 1].data; //Get the data of the current page.
var nowpage = allpages[allpages.length - 1]; //Get the page, including data and methods

​ This part of the content comes from one of my articles, I will put the address in the reference file.

Conclusion:

The data transfer between components is not much different from that between components and pages, and components can also be nested within components.

References

Summary of WeChat Mini Program Development Skills (I) - Data Transfer and Storage

This is the end of this article about information transmission and function calls between WeChat Mini Program pages and components. For more relevant WeChat Mini Program pages and component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!