zoukankan      html  css  js  c++  java
  • 探秘小程序(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对象
      }
    })
  • 相关阅读:
    九九乘法表
    计算器界面
    3.2封装的日期类
    杨辉三角
    100以内的素数
    九九 乘法表
    七、logging模块
    六、MySQLdb 模块
    四、浏览器运行模式
    五、configparser模块
  • 原文地址:https://www.cnblogs.com/codeww/p/9064832.html
Copyright © 2011-2022 走看看