(The same as the principle of Vue parent-child component parameter transfer, friends who have learned Vue easier to use oh)

The father the son

  • (1) Add attributes to the child component tag in the parent component to pass data to the child component
<submit-bar total="{{total}}" ></submit-bar>
Copy the code
  • (2) The child component is received in JS via properties and can specify the received data type
 properties: {
     total: Number
 }
 // You can also set the default value
 properties: {
     total: {
         type: Number.value: 0}}Copy the code

Child the parent

  • (1) Customize the event in the child component tag of the parent component and pass it to the child component
<submit-bar bind:click="clickHandler"></submit-bar>
Copy the code
  • (2) for sub-componentsThis.triggerevent (' Parent component custom event ', 'parameter to pass ')Triggers a custom event passed by the parent component
this.triggerEvent("clickHandler".'Hello World! ')
Copy the code

(3) After the execution of the second step, the function of the parent component’s custom event binding will be executed and accept the data from the child component

submit(e) {
    console.log(e)
    // You can see that the parent component receives arguments from the child component
    / / e.c. with our fabrication: urrentTarget. Detail. Total available
},
Copy the code
  • Conclusion: components can see father receive send it to the child component parameters can be through the e.c. with our fabrication: urrentTarget. Detail. Total available

Child to Parent – Gets the index of the currently clicked element

  • You can set the data-index attribute while traversing.
/ / HTML
<view class="item-content"
    wx:for="{{ imageList }}"
    wx:key="*this"
    data-index="{{index}}"
    bind:click="clickItem"
>
</view>

/ / js parts
clickItem(e) {
   this.triggerEvent('changeItem', e.currentTarget.dataset.index)
}
Copy the code
  • Summary: Set custom attributes, make a logo, easy to get. The data passed in can be found by printing in the clickItem click function above