https://cloud.tencent.com/developer/article/1483494
Demand, the value passed to the subassembly A parent component, the receiving component passed through the parent subassembly
A subassembly
js: data
Communication between components
Basic means of communication between the components are the following.
- WXML Binding: parent element for setting data to the specified attribute subassembly disposed only compatible JSON data (basic library version 2.0.9 from the beginning, you may further comprise functions in the data). Specific templates and styles introduced in the assembly sections.
- Event: subassembly for passing data to the parent component, can pass any data.
- If the above two methods is insufficient to meet the needs of the parent component can also
this.selectComponentobtain subassembly instance object method, so that arbitrary data can be accessed directly and assembly methods.
Monitor events
Event System is one of the main ways of communication between components. Custom components can trigger any event, reference page components can listen to these events. On the basic concepts and usage events, see Events.
Methods custom components monitor events and event listener method is exactly the same basic components:
Code Example:
< ! - When custom components trigger "myevent" event, call the "onMyEvent" method - > <the Component the -tag -name bindmyevent = "onMyEvent" / > < ! - or can be written - > <the Component the -tag the bind -name : MyEvent = "onMyEvent" / >
Page ( {
onMyEvent : function (E ) {E .detail Detail when the object to provide a custom component // trigger event } } )
trigger event
Custom component triggering event, use triggerEventmethods specified event name, detail objects and events Options:
Code Example:
Preview in Developer Tools
< ! - in a custom component - > <the Button bindtap = "onTap" > Click this button to trigger the "myevent" event < / the Button >
The Component ( {
Properties : { } , Methods : {onTap in : function ( ) { var myEventDetail = { } // Detail objects, providing the listener with the function var myEventOption = { } option // trigger event the this . TriggerEvent ( 'MyEvent' , myEventDetail , myEventOption ) } } } )
Options triggering events include:
|
Option name |
Types of |
Required |
Defaults |
description |
|---|---|---|---|---|
|
bubbles |
Boolean |
no |
false |
Whether an event bubbling |
|
composed |
Boolean |
no |
false |
Whether the event can cross component boundaries, is false, the event will only be triggered in the tree node component references, do not enter any other internal components |
|
capturePhase |
Boolean |
no |
false |
Whether the event has captured the stage |
Concept of bubbling and capture phases, read the section of the event instructions.
Code Example:
Preview in Developer Tools
// 页面 page.wxml
<another-component bindcustomevent="pageEventListener1"> <my-component bindcustomevent="pageEventListener2"></my-component> </another-component>
// 组件 another-component.wxml
<view bindcustomevent="anotherEventListener">
<slot /> </view>
// 组件 my-component.wxml
<view bindcustomevent="myEventListener">
<slot /> </view>
// the component.js-component My
the Component ( { Methods : {onTap in : function ( ) { the this . TriggerEvent ( 'customEvent' , { } ) // triggers only pageEventListener2 the this . TriggerEvent ( 'customEvent' , { } , {bubbles : to true } ) // in turn triggers pageEventListener2, pageEventListener1 the this . triggerEvent ( 'customEvent' , { }, {Bubbles : to true , the Composed : to true } ) // in turn trigger pageEventListener2, anotherEventListener, pageEventListener1 } } } )
// speak English
After // first component in the parent applet by reference sub-assembly (or assembly), through the property item, index; data pack assembly,
// value to pass after the subassembly, the subassembly is received in the properties of the values;
// then sub-assembly through its own events, such as catchtap = "listtap" method to activate custom event
// subassembly may then via the second argument, a value passed to the parent component, subassembly put the index passed parent components
// speak English
After // first component in the parent applet by reference sub-assembly (or assembly), through the property item, index; data pack assembly,
// value to pass after the subassembly, the subassembly is received in the properties of the values;
// then sub-assembly through its own events, such as catchtap = "listtap" method to activate custom event
// subassembly may then via the second argument, a value passed to the parent component, subassembly put the index passed parent components
