支付宝小程序组件通信

最近在公司接手支付宝小程序，虽然有微信小程序的开发经验，但是在部分细节上支付宝与微信还有差异。今天简单的介绍支付宝小程序中如何进行组件传值。本文用页面到组件传值说明嵌套组件传值的方式，即页面到组件 = 父到子，组件到页面 = 子到父

下面先上代码

父页面 axml 代码

  这是父页面
  上一次组件隐藏后传递过来的值是 {
    {fromchild}}
  展示子组件
  

父页面 js 代码

Page({
  data: {
    showtest: true,
    fromchild: 0,
  },

  showchild: function(){
    this.setData({
      showtest: false
    })
  },

  hidetest: function(info){
    this.setData({
      showtest: false,
      fromchild: info
    });
    console.log("获取组件传递的值：", info)
  }
});

子组件 axml 代码

  这是加载过来的子组件
   需要向父组件传递的值 toparent： {
    {toparent}}
  传递的值 toparent 加一
  隐藏子组件

子组件 js 代码

Component({
  mixins: [],
  data: {
    toparent: 0,
    childshow: false
  },
  props: {
    onHidetest: (info)=>{},
    fromparent: {
      type: Number,
      value: 0
    }
  },
  didMount() {
    this.setData({
      toparent: this.props.fromparent
    })
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    toparentadd: function(){
      this.setData({
        toparent: ++this.data.toparent
      })
    },

    hidechild: function(){
      console.log("点击了 隐藏子组件按钮")
      this.props.onHidetest(this.data.toparent);
    }
  },
});

父到子 

      (1) 基本操作方式与vue类似，都是在子组件的标签上通过自定义属性名+模板赋值，在页面渲染的时候将父组件的数据放在子组件标签上 

      (2) 子组件在接收时，需要在js文件的 props 里边将传递的数据进行声明，注意加上该数据的类型 一般分为 布尔 数值 字符 对象，传递方法在 子到父 中说明 

      (3) 子组件在 props 内声明过后，就可以正常在 axml文件 中向使用 data 中的数据一样进行渲染， 但是注意在 js文件 中使用时 需要用 this.props.XXX 进行调用，this.props.XXX 指向的就是声明的时候的 value 不必再 .value 

      (4) 注意事项：官方文档上说子组件不能直接修改 this.props 内的值； props 中进行声明时，方法、一般数据类型 案例中都有展示， 但是要注意 除方法以外 都需要把要传递的值 放在 value 下

    

子到父

      (1) 这个就需要通过传递方法来实现传值, 相当于子组件操作父组件的方法 

      (2) 注意传递方法的时候只能在子组件的标签上通过 onXXX="需要传递的方法" 这种形式就行传递，必须以 on 开头 

      (3) 子组件同样通过 this.props.XXX() 进行操作父组件的方法 

      (4) 子到父传值 就是在这个方法上通过 形参的形式传递参数，子组件中将具体参数放在方法中，父组件中通过调用形参来获得子组件传递过来的参数 

 内容均为个人整理，如有纰漏欢迎指正

    参考文档：https://docs.alipay.com/mini/framework/component_object