微信小程序开发系列-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方法将在下篇博文中记录。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java生产设备效率管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web生产设备效率管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为ac…

kivy中的GridLayout

说明 GridLayout 是 Kivy 框架中的一个布局管理器,它允许你在网格中排列子控件。你可以指定网格的行数和列数,然后添加子控件到网格中。GridLayout 会自动调整子控件的位置和大小,以适应网格的单元格。 在 Kivy 框架中,size_hint…

动态内存分配函数

malloc void* malloc( unsigned size) 申请size个字节的地址连续的内存单元 成功则返回指向内存块的指针, 失败则返回NULL malloc不对申请的空间初始化 calloc void*calloc(unsigned n,unsigmed size) 申请n* size字节的个地址连续的内…

2024-01-01 服务器开发-11个最佳免费和便宜SSL证书颁发机构

摘要: 2024-01-01 服务器开发-11个最佳免费和便宜SSL证书颁发机构 ssl证书颁发机构 在网站上实施 SSL 证书不再被视为奢侈品。它不仅通过加密网站访问者与您的网站之间交换的通信来提高您的网站安全性,而且还提高了网站的 SEO 排名。此外,如果你托管的平…

深度学习核心技术与实践之计算机视觉篇

非书中全部内容,只是写了些自认为有收获的部分 计算机视觉背景 (1)视觉皮层的神经元是一列一列组织起来的,每一列神经元只喜欢某一种特定的形状或者某些简单的线条组合,而不是鱼、老鼠、鲜花 (2&#xf…

HTTPS协议详解

目录 前言 一、HTTPS协议 1、加密是什么 2、为什么要加密 二、常见加密方式 1、对称加密 2、非对称加密 三、数据摘要与数据指纹 1、数据摘要 2、数据指纹 四、HTTPS加密策略探究 1、只使用对称加密 2、只使用非对称加密 3、双方都使用非对称加密 4、对称加密非…

如何使用Docker compose安装Spug并实现远程访问登录界面

🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、Cpolar杂谈 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. Docker安装Spug二. 本地访问测试三. Linux 安装cpolar四. 配置Spug公网访问…

Git:常用命令(一)

取得项目的Git 仓库 从当前目录初始化 1 git init 初始化后,在当前目录下会出现一个名为.git 的目录,所有Git 需要的数据和资源都存放在这个目录中。不过目前,仅仅是按照既有的结构框架初始化好了里边所有的文件和目录,但我们还…

Python备忘录工具:创建自己的备忘录应用

更多Python学习内容:ipengtao.com 在日常生活和工作中,经常需要记录重要信息、任务清单和想法。为了更好地管理这些信息,可以使用Python创建一个备忘录工具。本文将介绍如何使用Python开发一个简单而功能强大的备忘录应用,以及提供…

Redis源码——压缩列表

压缩列表ziplist本质上就是一个字节数组,是Redis为了节约内存而设计的一种线性数据结构,可以包含多个元素,每个元素可以是一个字节数组或一个整数。Redis的有序集合、散列和列表都直接或者间接使用了压缩列表。当有序集合或散列表的元素个数比…

使用 Hyper-V 创建虚拟机

使用 Hyper-V 创建虚拟机 官网教程修改存储目录Hyper-V管理器创建虚拟机启动虚拟机Win10安装教程Press any key to boot from CD or DVD...... 如何使用Windows自带的虚拟机工具来创建虚拟机, 快速创建虚拟机进行学习探讨,如果有环境问题可以立即创建一个…

牛客网SQL训练5—SQL大厂面试真题

文章目录 一、某音短视频1.各个视频的平均完播率2.平均播放进度大于60%的视频类别3.每类视频近一个月的转发量/率4.每个创作者每月的涨粉率及截止当前的总粉丝量5.国庆期间每类视频点赞量和转发量6.近一个月发布的视频中热度最高的top3视频 二、用户增长场景(某度信…

【数学建模美赛M奖速成系列】Matplotlib绘图技巧(二)

Matplotlib绘图技巧(二) 写在前面2. 函数间区域填充函数fill_between()和fill()参数: 3. 散点图 scatter4. 直方图 hist5. 条形图 bar5.1 一个数据样本的条形图参数: 5.2 多个数据样本进行对比的直方图5.3 水平条形图参数 5.4 绘制…

c盘扩容时,d盘无法删除卷问题

C盘扩容时,磁盘管理中D盘右键无法删除卷的原因 首先,D盘下文件夹为空,但是显示可用空间不是100%,经过排查,发现是虚拟内存设置在了D盘导致无法删除卷,这里只需要将虚拟内存放到其他盘,如E盘即可…

2023年度学习总结

想想大一刚开始在CSDN写作,这一坚持,就是我在CSDN的第九个年头,这也是在CSDN最有里程碑的一年,这一年我被评为CSDN的博客专家啦!先是被评为Unity开发领域新星创作者,写的关于一部分Unity开发的心得获得大家…

ROS安装PR2

一、PR2介绍 PR2是Willow Garage公司设计的机器人平台,也是目前科研领域经常用到的机器人之一。PR2有两条手臂,每条手臂七个关节,手臂末端是一个可以张合的夹爪;PR2依靠底部的四个轮子移动,在头部、胸部、肘部、夹爪上…

移动客服系统必备功能:提升用户体验与工作效率的关键要素

在快速发展的时代,工作的节奏也越来越快,也许您正在高铁上或者正在午餐时,就有客户提出需求来。所以,移动客服系统的需求也越来越多,那么移动客服系统怎么样?接下来,我们一起来看看移动客服系统…

填充点云孔洞(较大的洞)halcon算法

前言 很多时候,一些小洞可以通过平滑算法,或者三角化算法的参数调整,即可对较小的孔洞进行填充,但是较大的洞却很难通过上面的算法进行填充。 下面介绍一种填充孔洞的思路: 步骤一:对点云进行滤波处理,找到孔洞所在平面 本文为了更直观的进行讲解,去掉了去除噪声和…

c语言内嵌汇编知识点记录

内容在飞书云文档,点击打开即可。 Docshttps://r0dhfl3ujy9.feishu.cn/docx/EaVIdjGVeoS6fUxiKWkcjAq8nWg?fromfrom_copylink

详解全志R128 RTOS安全方案功能

介绍 R128 下安全方案的功能。安全完整的方案基于标准方案扩展&#xff0c;覆盖硬件安全、硬件加解密引擎、安全启动、安全系统、安全存储等方面。 配置文件相关 本文涉及到一些配置文件&#xff0c;在此进行说明。 env*.cfg配置文件路径&#xff1a; board/<chip>/&…