微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件

更新時間：2020年11月01日 14:20:48 作者：老周愛敲代碼

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件，供大家參考，具體內(nèi)容如下

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

prompt組件：

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

// 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: {
 //確認按鈕
 bindConfirm: function (e) {
  this.triggerEvent('events');
 },

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

home頁面：

1.首先需要在home.json的"usingComponents"屬性里引入prompt組件地址；
2.然后在home.wxml中引入<prompt />組件，且綁定的事件名稱要跟組件中triggerEvent方法指定的名稱一致；
3.完成上面2個步驟后，我們就可以在js頁面就可以監(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({
 /**
 頁面的初始數(shù)據(jù)
 */
 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,
 })
 },
})

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