Applet communication between father and son with the event components

 

Click here to view micro-channel applet official documents

 

The following examples, self experience ..

子 - Component 

child.json

{
  "component": true,
  "usingComponents": {}
}

child.wxml

<view class='template-child'>
  <block wx:for='{{dataFromParent}}'>
    <button data-id='{{item.id}}' bindtap='onTapChild'>{{item.name}}</button>
  </blcok>
</view>

 

child.js

The Component ({
   / * * 
   * component attribute list 
   * / 
  Properties: { 
    dataFromParent: { 
      type: the Array, 
      value: [], 
      Observer: function (newVal, oldVal, changedPath) {
         // function executed when the attribute is changed (available optional), can be written in the methods defined in the method section name string 
        // generally newVal data is newly set, the old data is oldVal 
      } 
    } 
  } 

  / * * 
   * component of the initial data 
   * / 
  data: {}, 

  / * * 
   * the method of the list of components 
   * / 
  methods: { 

    onTapChild: function (event) { 

      // the Detail objects, available to the event listener function 
      var= myEventDetail { 
        ID: event.currentTarget.dataset.id 
      } 
      // option triggering event 
      var myEventOption = {} 
       // use custom components triggerEvent method of triggering an event, the name of the specified event, detail objects and events option 
      the this .triggerEvent ( 'parentEvent ' , myEventDetail, myEventOption) 
    } 
  } 
})

Father - Page

parent.json

{
  "usingComponents": {
    "child": "../component/child/child"
  }
}

Project directory structure:

parent.wxml

< View class = 'parent-wrap' > 
  < View > This is the parent container, dataFromParent is passed to the data sub-assembly, parentEvent is a self event name defined assembly may be triggered </ View > 
  < Child dataFromParent = '{{Contents} } ' the bind: parentEvent =' onParentEvent ' /> 
</ View >

Can  bind: parentEvent   can  bindparentEvent 

 

parent.js

Page ({ 

  / * * 
   * initial page of data 
   * / 
  Data: { 
    Contents: [ 
      { 
        ID: . 1 , 
        name: "Click Button 1 ' 
      }, 
      { 
        ID: 2 , 
        name: " Click the second button' 
      } 
    ] 
  }, 

  // when custom components parentEvent event trigger, calling onParentEvent method 
  onParentEvent: function (event) {
     // Detail object provides custom component triggering event, used to obtain the data to transfer subassembly 
    var ID = event .detail.tag; 
    the console.log ( 'data transfer to the subassembly ID:' , ID);
     //Actions ... 
  } 
})

 

 

Turn: https://www.cnblogs.com/yier0705/p/9679505.html