父子组件通讯

微信小程序

1. 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { / 参数对象 / }) ，将数据发送到父组件
2. 在父组件的wxml中通过自定义的形式将需要使用子组件数据的函数绑定给步骤1中的自定义事件名称
3. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

子组件

    wxml
    <button bindtap="onTap">点击这个按钮将触发mySonEvent事件</button>

    js
    Component({
        methods: {
            onTap: function() {
                let info = {name:zhangsan,age:lisi};
                this.triggerEvent('mySonEvent',info); //触发父组件中的myParentEvent事件
            }
        }
    })

父组件

    wxml
    <component-child bind:mySonEvent="myParentEvent" />

    js
    Page({
        myParentEvent:function(e) {
            console.log(e.detail);
        }
    })

支付宝小程序

自定义组件可以通过 this.$page 拿到小程序页面实例，然后将组件实例挂载到小程序页面实例上进行相互调用。

父组件中

this.$page.fu = this;

子组件中

    this.$page.zi = this;

在小程序中调用fu组件和zi组件的方法：

//调用组件内 method 方法  
this.zi.zimethod()
this.fu.fumethod()
//更改组件内data值
this.fu.setData({
      test:'123'
    })
 this.zi.setData({
      test:'123'
    })

fu组件中调用zi组件：

//调用子组件method方法
this.$page.zi.zimethod()
////更改子组件内data值
 this.$page.zi.setData({
      test:'123'
    })

zi组件调用fu组件：

//调用父组件method方法
this.$page.fu.zimethod()
////更改父组件内data值
 this.$page.fu.setData({
      test:'123'
    })