In this article, I will use my own development experience to explain the relevant content from the following perspectives.
- How to transfer data to components on the page
- How components pass data to pages
- How to call functions within a component on the page
- How components call functions within pages
1. How to transfer data to components on the page
The most commonly used and standardized way is to set up the data listener observer.
Suppose that component sc is introduced in the page
"usingComponents": {
"sc":""
}
If you want to configure a listener to monitor changes in data lists in the page, the component is written in the page as follows:
<sc
list="{{list}}"
>
</sc>
The listener in the component is written as follows. When the `list` value on the page changes every time, the `observer` listener will be triggered and the changed value will be printed.
properties: {
list:{
type:Array,
observer: function (newVal, oldVal){
(newVal)
}
}
}
Similarly, in addition to dynamically passing values, this method can also directly pass static values, that is, there is no need to call the obeserver listener. In the component, you can use .* directly to get the values in properties (* represents the names of each property value).
2. How components pass data to pages
Since the component can set up a listener to monitor page data changes to achieve the effect of data transmission, the page can also use a listener to monitor the information transmission triggered by the component.
Still with the above components as an example, how to transmit information to the page?
Configure component listeners on the page
ComponentListener(e){
let info = ;
}
The component selects an event and binds the listener
<sc bind:listener="ComponentListener" > </sc>
Passing input from the component to the page only requires triggering the corresponding event in the component, which is the data passed.
('listener',{func,tid});
3. How to call functions within components on the page
Suppose we introduce and use a component comment-bottom, which has the function handleCloseInput inside the component, which needs to be triggered in a certain logic.
To use functions within a component, you must configure a unique id for the component, so that the component can be selected through dom operations on the page and calls the functions in the component.
<comment-bottom ></comment-bottom>
The calling logic of functions in components on pages is as follows:
= ("#commentBottom");
();
4. How components call functions in the page
The above method of passing data to the page is actually calling the functions in the page. We can understand the logic in this way, understanding the usage as a function map.
<component bind:componentfunc="pagefun"></component>
When triggering componentfunc is used to trigger, the pagefunc in the page will be triggered by mapping the relationship through bind: this function.
Secondly, calling functions in the page can also be done through the page stack. The component does not occupy the stack space of the page. Therefore, using getCurrentPages in the component can obtain the data and methods of the corresponding page.
var allpages = getCurrentPages();//Get all page datavar nowpage = allpages[ - 1].data;//Get the data of the current page.var nowpage = allpages[ - 1];//Get page, including data and methods
This part comes from an article of mine, and I will put the address in the reference file.
Conclusion:
There is not much difference between data passing between components and components and between components and pages. Components can also be nested in components.
Reference files
Summary of WeChat Mini Program Development Skills (I)--Data Transfer and Storage
This is the article about information transfer and function calls between WeChat applet pages and components. For more related WeChat applet pages and components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!