需求：在微信小程序開發(fā)過程中，頁(yè)面通常會(huì)用到提示彈框。這時(shí)為了減少代碼量及代碼可拓展性，我們自定義一個(gè)提示組件是必不可少的了。那么問題來了，頁(yè)面如何監(jiān)聽到組件的觸發(fā)事件呢？

下面給大家詳細(xì)講解頁(yè)面如何監(jiān)聽自定義組件的觸發(fā)事件。

prompt組件：

1. 首先搭建提示組件ui。由于后面各個(gè)頁(yè)面都有可能用到該組件，所以我選擇從頁(yè)面?zhèn)髦颠^來顯示提示語(yǔ)；
2. 然后在prompt.js的點(diǎn)擊事件里指定方法名稱，該方法名稱在后面的頁(yè)面調(diào)用監(jiān)聽組件時(shí)需要用到；

// 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,//聲明屬性類型
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    //確認(rèn)按鈕
    bindConfirm: function (e) {
      this.triggerEvent('events');
    },

    // 截獲豎向滑動(dòng)--禁止底部頁(yè)面滑動(dòng)
    catchTouchMove: function (res) {
      return true;
    },
  }
})

home頁(yè)面：

1. 首先需要在home.json的"usingComponents"屬性里引入prompt組件地址；
2. 然后在home.wxml中引入<prompt />組件，且綁定的事件名稱要跟組件中triggerEvent方法指定的名稱一致；
3. 完成上面2個(gè)步驟后，我們就可以在js頁(yè)面就可以監(jiān)聽操作組件的觸發(fā)事件啦；

// 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({
  /**
 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    isShowPromptComponent: false,//是否顯示提示控件組件
  },

  //點(diǎn)擊彈出自定義組件
  bindEjectComponent:function(e){
    var that = this;
    that.setData({
      isShowPromptComponent: true,
      txtTips:"Hi，我是自定義提示組件喔!",
    })
  },

  //提示組件確認(rèn)事件
  bindPromptConfirm: function (e) {
    var that = this;
    that.setData({
      isShowPromptComponent: false,
    })
  },
})

看到這里‘頁(yè)面監(jiān)聽組件觸發(fā)事件’功能就實(shí)現(xiàn)啦?。?！最后上演示視頻，看看效果~