支付宝、钉钉小程序父子组件传值

最近公司有需求做一个钉钉小程序，因为官方文档的介绍真的让人看得头晕，所以最后决定对小程序组件传值自己写一篇总结。

父传子：

[父组件]page/index/index.axml

<component name="我是父组件传递过来的" />

[子组件]//components/component/index.axml

<view>
  {{ name }} // 我是父组件传递过来的
</view>

子传父：

[父组件] pages/index/index.axml

{{ num }} //999
<component name="我是父组件传递过来的" onChange="onChange"></component>

[父组件] pages/index/index.js

Page({
  data:{
    num:999
  },
  onChange(data){
    this.setData({
      num:data
    });
  }

此时data形参未传值，所以num值默认999

接下来和子组件建立联系

[子组件] components/component /index.axml

<view>
  {{ name }}
  <button onTap="add">+</button> 
</view>

[子组件] components/component/index.js

Component({
 props: {
    onChange(data){console.log(data)}
  },
  data:{
    child:0
  },
  didMount(){
     this.onChange()
  },
  didUpdate(){
    this.onChange()
  },
  methods:{
    onChange(){
       this.props.onChange(this.data.child);//将子组件data实例对象下的child当做形参传递给父组件的函数
    },
    add(){
      this.setData({
        num:this.data.child ++  //此时操作子组件函数的child+1，父组件num相应的也+1
      });
    }
  }
})

最后父组件视图里的num值就会更新为0，点击button按钮num依次+1

[父组件] pages/index/index.axml

{{ num }} //0
<component name="我是父组件传递过来的" onChange="onChange"></component>

image.png image.png

特别提醒：
支付宝、钉钉小程序因语法类似，所以这里的组件传值在两个开发环境都适用，建立相对应的目录，copy即可