探秘小程序（9）：父页面与自定义组件交互

页面中引用自定义组件，页面与父组件如何交互呐？

（1）页面向自定义组件传值

 调用页面通过标签的属性值进行传值：

组件：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    boxType:{//设置弹框类型
      type:String,
      default:'input'
    },
  },
}）

调用页面：

 <dialog-box id="dialogBox" box-type="input"></dialog-box>

（2）页面调用自定义组件方法

组件中定义方法

 methods: {
    toggle:function(){//开启、关闭弹框
      this.setData({
        isClose: !this.data.isClose
      })
    },
}

调用页面（selectComponent）：

this.dialogBox = this.selectComponent("#dialogBox");
this.dialogBox.toggle();//开启弹框

（3）自定义组件传值给调用页面

组件中触发方法,传值

 onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }

调用页面：

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

js(detail传递数据)

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})