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对象
      }
    })
  • 相关阅读:
    [Unity3D]Animation说明
    [Unity3D]Shader说明
    [AR+Vuforia]学习笔记
    [Android]ListView学习笔记
    [Android]优化相关
    [Android]学习笔记之布局
    [Android]快捷键
    [Android]学习笔记Activity_001
    [Unreal]学习笔记之灯光说明
    什么是Hystrix,Hystrix如何使用
  • 原文地址:https://www.cnblogs.com/codeww/p/9064832.html
Copyright © 2011-2022 走看看