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对象
      }
    })
  • 相关阅读:
    Photoshop 基础七 位图 矢量图 栅格化
    Photoshop 基础六 图层
    Warfare And Logistics UVALive
    Walk Through the Forest UVA
    Airport Express UVA
    Guess UVALive
    Play on Words UVA
    The Necklace UVA
    Food Delivery ZOJ
    Brackets Sequence POJ
  • 原文地址:https://www.cnblogs.com/codeww/p/9064832.html
Copyright © 2011-2022 走看看