微信小程序自定义组件-事件

最新推荐文章于 2025-07-17 10:00:00 发布

原创最新推荐文章于 2025-07-17 10:00:00 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍微信小程序中自定义组件的使用方法，包括如何在组件内部触发事件并传递数据到外部页面，以及页面如何接收这些数据。通过示例展示了如何定义组件事件、使用triggerEvent方法触发事件，并在页面中绑定事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档地址https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
页面-page

//.wxml
/* 
*   在这里：可以这样解读绑定组件·handleSearch·的方法，是本页面的·handlePageSearch·的方法
*/
<searchBar bind:handleSearch="handlePageSearch"></searchBar>
//.js
/*
 * 在·handlePageSearch·可以获取组件内传过来的值
*/
handlePageSearch(e) {
    console.log(e)
},

组件-searchBar

//.wxml
//组件绑定的方法是：handleSearch
<view class="searchContainer">
  <view class="iconfont icon-location" catch:tap="handleLocation"></view>
  <view>杭州</view>
  <view class="searchBox">
    <view class="iconfont icon-search"></view>

    <input placeholder='搜索精彩活动' confirm-type="search" bindconfirm="handleSearch22"></input>

  </view>
</view>
/*
* 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
*/
//.js
handleSearch22(e) {
      const {value:searchvalue}=e.detail
      console.log(searchvalue)
      /*
       *这里的handleSearch必须和页面的<searchBar bind:handleSearch="..."></searchBar>的绑定的函数名一致
       *不必与·handleSearch22·一致即可
      */
      this.triggerEvent('handleSearch', { searchvalue}, {})
      //参数：

      // var myEventDetail = {} // detail对象，提供给事件监听函数
      // var myEventOption = {} // 触发事件的选项
      // this.triggerEvent('myevent', myEventDetail, myEventOption)
      // 详细见文档
    },