微信小程序:自定义组件触发父级页面事件

santu2年前 (2023-02-12)微信小程序1063

一、自定义组件定义如下:


1. js文件


Component({
    var app = this
    properties: {},
    methods: {
        onTap(){
            var myEventDetail = {} // detail对象,提供给事件监听函数
            var myEventOption = {} // 触发事件的选项
        app.triggerEvent('myevent', myEventDetail, myEventOption)
        }
    } 
})

2. wxml文件


<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
  <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
</view>


二、引用组件的父级页面

1. js文件

Page({
    data: { },
    myEventListener(e){
        console.log(e)
        }
})


2. wxml文件


<view>
  <my-component bind:myevent="myEventListener"> </my-component>
</view>


注:其中的 “myevent” 事件只是一个标识符,并不是一个方法的名称(自定义组件中没有,父级页面中也没有),其被指定为 bind:myevent="myEventListener"事件。即自定义组件中通“myevent”这一个标识符等于(=)或代表MyEventListener方法。自定义组件中通过使用“ this.triggerEvent('myevent', myEventDetail, myEventOption)” 来触发父级页面中的 “myEventListener” 方法


相关文章

微信小程序:setData函数

微信小程序:setData函数

在小程序中经常会用到setData函数把变量渲染到视图层,为什么不直接赋值呢?下面来详细了解一下setData是小程序开发中使用最频繁的接口,界面几乎所有变量都要用到它setData函数用于将逻辑层的...

微信小程序:获取用户手机号码

微信小程序:获取用户手机号码

微信小程序可以直接获取用户绑定手机的号码,有几个问题需要注意:大前提,小程序的主体必须是非个人主体;非个人主体必须通过微信公众平台的第三方认证,这个认证是付费服务,300元/年;以上两个条件如果不符合...

微信小程序:页面跳转后去掉左上角的返回按钮

微信小程序:页面跳转后去掉左上角的返回按钮

跳转方式:wx.navigatorTo 【新页面打开,默认会有返回按钮】wx.redirectTo【当前页面打开,默认无返回按钮】wx.switchTab【只能用于跳转到tabbar页面,并关闭其他非...

微信小程序:Vant Weapp组件库的使用

微信小程序:Vant Weapp组件库的使用

官方文档:Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)npm初始化,根据需求填写内容,或者一路回车即可。npm init2.安装Vant Weapp组件库...

微信小程序:组件的onLoad()实现

微信小程序:组件的onLoad()实现

onLoad()函数是页面加载时自动运行的,组件component使用另外一种方式达成同样的效果    // 组件生命周期声明对象(最重要的生命周期是...