微信小程序开发系列-10组件间通信01

微信小程序开发系列目录

  • 《微信小程序开发系列-01创建一个最小的小程序项目》

  • 《微信小程序开发系列-02注册小程序》

  • 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》

  • 《微信小程序开发系列-04获取用户图像和昵称》

  • 《微信小程序开发系列-05登录小程序》

  • 《微信小程序开发系列-06事件》

  • 《微信小程序开发系列-07组件》

  • 《微信小程序开发系列-08自定义组件模版特性》

  • 《微信小程序开发系列-09自定义组件样式特性》

文章目录

  • 微信小程序开发系列目录
  • 前言
  • 组件间通信
    • 普通事件绑定
    • 自定义事件类型绑定
  • 总结

前言

通过06、07、08文章可以知道页面有事件系统,页面可以通过数据绑定进行逻辑层和渲染层通信。自定义组件可理解为一种特殊的页面,因此组件间、组件与“页面”间应该也是可以通信的。那么本文就学习下组件间的通信方式。

组件间通信

组件间的基本通信方式有以下3种。

  • WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。《微信小程序开发系列-08自定义组件模版特性》文章的数据绑定一节有介绍,本文不再赘述。
  • 事件:用于子组件向父组件传递数据,可以传递任意数据。
  • 父组件可以通过 this.selectComponent 方法获取子组件实例对象,直接访问子组件的任意数据和方法。

普通事件绑定

框架为开发者提供了一系列基础组件,而基础组件的事件在页面中的完整生成方式是:

  1. 在页面wxml的标签上通过bindtap指定事件处理函数;
  2. 在页面的js中声明事件处理函数;
  3. 当用户点击对应的标签时,事件便能触发;

框架为开发者提供了一系列事件类型,如tap事件(详细可参考《微信小程序开发系列-06事件》事件分类一节)。因此对开发者来说只需要2步就能完成对事件的处理:

  1. 绑定事件处理函数:在wxml文件的标签上通过bindtap绑定tap的事件处理函数
  2. 声明事件处理函数:在对应的js中声明事件处理函数

做完这两步后,当用户点击对应的标签时,事件便能触发;只要是框架已经提供的事件类型,无论是页面还是自定义组件都可以按照这种方式来构造事件的处理。

请添加图片描述

为了便于后文的表述,我将框架提供的事件类型称为“标准事件”。

到这里,便想到一个问题,如果我想自定义事件,而不是框架已经为我们定义好的事件类型,那应该怎么实现?

自定义事件类型绑定

对于“标准事件”,声明事件处理函数的动作相当于注册了一个监听函数,当事件触发时,就会调用这个监听函数。其实,到目前为止,我一直不知道 当用户点击标签,这个点击动作的产生 到 监听函数被调用之间到底发生了什么?怎样就触发了 监听函数被调用?

到这里,便想到一个问题,如果我想自定义事件,而不是框架已经为我们定义好的事件类型,那应该怎么实现?

例如,我将bind:tap改成bing:sif666_event,其他都不改,myEvent函数还会被调用吗?试下。。。

请添加图片描述

结果是myEvent函数没有被调用,console没有输出。我猜想tap事件被触发 到监听函数被调用之间可能还有一个什么动作,而这个动作可能就是console没有输出的关键。

请添加图片描述

我们前面提到的那个关键“动作”就是triggerEvent函数。它可以为自定义事件类型在code层面去触发事件,进而做出响应。

请添加图片描述

自定义触发事件的选项还可以控制是否冒泡、捕获等。本文就不再演示了。

请添加图片描述

总结

本文掌握了普通事件绑定和自定义事件类型绑定,重点是理解自定义事件类型的绑定,该方法给开发者更多自由发挥的空间。selectComponent方法将在下篇博文中记录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/312107.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Matrix画布Canvas旋转Rotate,Kotlin

Android Matrix画布Canvas旋转Rotate,Kotlin private fun f1() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.…

Getway介绍和使用

Getway 入门简介 网关搭建步骤: 创建项目,引入nacos服务发现和gateway依赖 配置application.yml,包括服务基本信息、nacos地址、路由 路由配置包括: 路由id:路由的唯一标示 路由目标(uri)…

Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目

1. Vue3简介 性能的提升 打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54% 源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking 拥抱TypeScript Vue3可以更好的支持TypeScript 新的特性 Composition Api(组合Api) setupref…

STM32入门教程-2023版【3-2】使用库函数点亮GPIO灯

关注 点赞 不错过精彩内容 大家好,我是硬核王同学,最近在做免费的嵌入式知识分享,帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! 二、正式点亮一个LED灯 (3)使用库函数点亮GPIO灯 RCC初始化 首先用的是&…

iptables防火墙(二)

目录 1、SNAT策略及应用 1.1、SNAT 策略概述 1.2、SNAT 策略的应用 2、DNAT 策略及应用 2.1、DNAT 策略概述 2.2、DNAT 策略的应用 3、规则的导出、导入 3.1、规则的备份及还原 3.2、使用 iptables 服务 4、使用防火墙脚本 4.1、防火墙脚本的构成 &#xf…

图像拼接——基于homography的特征匹配算法

目录 1. 任务要求2. 数据集3. 基于homography的特征匹配算法4. 拼接流程展示4.1 图片实例4.2 特征点位图4.3 特征点匹配结果4.4 相机校准结果4.5 拼接结果 5. 部分图像拼接结果展示 1. 任务要求 输入:同一个场景的两张待拼接图像(有部分场景重合&#x…

Linux 安装 mysql 【使用 tar.gz | tar.xz安装包-离线安装】

一、以tar.xz压缩包为安装源 网址:https://downloads.mysql.com/archives/community/ 二、解压压缩包 首先,将压缩包从windows传输到linux上 解压到/usr/local下,并且将解压的目录名称改为mysql tar -xvf /tmp/mysql-8.1.0-linux-glibc2.2…

微信小程序-父子页面传值

父子页面传值 父页面向子页面传值 方法一&#xff1a; 父页面&#xff1a; 1. /page/xxx/xxx?id1子页面&#xff1a; onLoad:function(option){ }方法二 <bindtap“func” data-xxx””> 子页面向父页面传值 定义父子页面 父页面&#xff1a;hotspot 子页面&a…

qt中信号槽第五个参数

文章目录 connent函数第五个参数的作用自动连接(Qt::AutoConnection)直接连接(Qt::DirectConnection - 同步)同线程不同线程 队列连接(Qt::QueuedConnection - 异步)同一线程不同线程 锁定队列连接(Qt::BlockingQueuedConnection) connent函数第五个参数的作用 connect(const …

2023年——我和CSDN的一周年纪念日|回顾与展望|汗水与成长

​ ​ &#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 &#x1f38a;对2023的总结与回顾&#x1f38a; &#x1f3c5;获奖记录 &#x1f4da;学…

Springboot整合MybatisPlus的基本CRUD

目录 前言1. 搭建项目2. 基本的CRUD 前言 发现项目框架是MybatisPlus的&#xff0c;由于个人使用该框架的CRUD比较少 对此学习过程中&#xff0c;从零到有开始搭建学习还是比较重要的&#xff0c;感悟会比较多 关于各个类的使用&#xff0c;可看如下文章&#xff1a; 剖析Ja…

关于求定积分的反函数的导数【认清原函数x变量和反函数x变量】

如图碰到该题该怎么解&#xff1f; 在纸上按①②③的顺序写出这个&#xff0c;其中①是最主要的 第②步和第③步就是在用反函数时要用到的逻辑思维&#xff0c;不是一起用的&#xff0c;你需要用②才去用②&#xff0c;你需要用③才去用③ 在纸上先写出第①步&#xff0c;即 其…