微信小程序实现页面监听自定义组件的触发事件

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：95

需求：在微信小程序开发过程中，页面通常会用到提示弹框。这时为了减少代码量及代码可拓展性，我们自定义一个提示组件是必不可少的了。那么问题来了，页面如何监听到组件的触发事件呢？

下面给大家详细讲解页面如何监听自定义组件的触发事件。

prompt组件：

首先搭建提示组件ui。由于后面各个页面都有可能用到该组件，所以我选择从页面传值过来显示提示语；
然后在prompt.js的点击事件里指定方法名称，该方法名称在后面的页面调用监听组件时需要用到；

// prompt.wxml
<view class="main" catchtouchmove="catchTouchMove">
	<view class="main-mask"></view>
	<view class="main-content">
		<view class="content-title">提示</view>
		<view class="content-text">{{txtTips}}</view>
		<button class="btn-confirm" bindtap="bindConfirm">確定</button>
	</view>
</view>

// prompt.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    txtTips: String,//声明属性类型
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //确认按钮
    bindConfirm: function (e) {
      this.triggerEvent('events');
    },

    // 截获竖向滑动--禁止底部页面滑动
    catchTouchMove: function (res) {
      return true;
    },
  }
})

home页面：

首先需要在home.json的"usingComponents"属性里引入prompt组件地址；
然后在home.wxml中引入<prompt />组件，且绑定的事件名称要跟组件中triggerEvent方法指定的名称一致；
完成上面2个步骤后，我们就可以在js页面就可以监听操作组件的触发事件啦；

// home.json
{
  "usingComponents": {// 需引入自定义组件地址
    "prompt": "/component/prompt/prompt"
  }
}

// home.wxml
<view class="main">
  <button bindtap="bindEjectComponent">弹出自定义组件</button>
  <!-- 提示组件 -->
	<prompt txtTips="{{txtTips}}" bind:events="bindPromptConfirm" wx:if="{{isShowPromptComponent}}"/>
</view>

// home.js
Page({
  /**
 页面的初始数据
   */
  data: {
    isShowPromptComponent: false,//是否显示提示控件组件
  },

  //点击弹出自定义组件
  bindEjectComponent:function(e){
    var that = this;
    that.setData({
      isShowPromptComponent: true,
      txtTips:"Hi，我是自定义提示组件喔!",
    })
  },

  //提示组件确认事件
  bindPromptConfirm: function (e) {
    var that = this;
    that.setData({
      isShowPromptComponent: false,
    })
  },
})