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

santu1年前 (2023-02-12)微信小程序415

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


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” 方法


相关文章

微信小程序:Button按钮的用法

微信小程序:Button按钮的用法

在触屏手机上,不用按钮也可以直接触摸操作,button控件主要是用来实现按钮点击效果,看起来更直观。增加按钮,需要修改三个文件1.wxml文件    wxml文...

微信小程序:API安全处理

微信小程序:API安全处理

前端发往后端的请求,要先经过RSA公钥加密处理,后端收到后使用公钥解密,防止数据被中途拦截修改·在线生成RSA密钥对:http://travistidwell.com/jsencrypt/demo/·...

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

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

新建终端npm initnpm i tdesign-miniprogram -S --production构建npm修改app.json=>删除...