收藏
回答

自定义组件的事件

问题模块
API和组件

根据[文档:组件事件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/events.html) 介绍,目前只支持页面监听组件事件,通过这个可以将组件内的值变化传出给页面;


  1. 如果希望在页面onHide()时,改变组件的某些行为,比如清除定时器,待重新回到页面(如navigateBack),再次启动定时器,类似这样的需求,目前可以实现吗,怎么实现,可以提供下思路?

  2. 如果写类似 wux toast/toptips 这样的自定义组件,需要在页面中调用组件的方法(show),情况看起来似乎同1


不知道大家是否有类似的需求,是怎么做的,现阶段会在项目中用上自定义组件吗?


最后一次编辑于  2017-11-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 大橙子
    大橙子
    2017-11-07

    请教一下:页面监听组件事件,将组件内的值传出给页面这个过程到底是怎么完成的,按照官方文档来并没有成功。

    想要将价格组件的值(文本框中的数字)传递给页面中,下面是我的代码。


    页面 wxml

    <view>

    <!-- 以下是对一个自定义组件的引用 -->

    <price  num="{{2}}" bind:myevent="onMyEvent"/>

    </view>


    页面 js

    Page({

        onMyEvent: function (e) {

            console.log(e.detail) // 自定义组件触发事件时提供的detail对象

        }

    })


    自定义组件 wxml

    <view class="quantityViewStyle">

        <view class="minusStyle" bindtap="minus" style="color:{{num==min?'#DADADA':white}}">-</view>

        <view class="inputViewStyle">

            <input class="inputStyle" value="{{num}}" type="number"/>

        </view>

        <view class="plusStyle" bindtap="plus" style="color:{{num==max?'#DADADA':white}}">+</view>

    </view>




    自定义组件 js

    Component({

        methods: {

            _emitMyEvent: function () {

                var myEventDetail = {} // detail对象,提供给事件监听函数

                var myEventOption = {} // 触发事件的选项

                this.triggerEvent('myevent', myEventDetail, myEventOption)

            }

        }

    })


    2017-11-07
    赞同
    回复
  • Amethyst
    Amethyst
    2017-11-07

    子组件怎么向父组件传值?官方说的是现在只有用triggerEvent实现?

    成功了吗?

    2017-11-07
    赞同
    回复
  • 漫无止境
    漫无止境
    2017-11-07

    minus或plus有调用_emitMyEvent方法吗?

    2017-11-07
    赞同
    回复
  • 大橙子
    大橙子
    2017-11-07

    这个问题已经搞清楚了,这里的 _emitMyEvent 就是个幌子,可以看看这个 自定义组件实例 demo

    直接自定义写的一个价格加减的组件,看着代码应该好理解一点。

    2017-11-07
    赞同
    回复