自定义组件的事件
发布于 6 年前 作者 chao85 5631 次浏览 来自 问答

根据[文档：组件事件](https://image.wxopen.club/content_40e77bf6-3382-11ea-9da5-38c9863fc7a9.png) 介绍，目前只支持页面监听组件事件，通过这个可以将组件内的值变化传出给页面；

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

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

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

4 回复

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

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

minus或plus有调用_emitMyEvent方法吗？

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

成功了吗？

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

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

页面 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)

        }

    }

})

回到顶部