微信小程序开发系列-11组件间通信02

微信小程序开发系列目录

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

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

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

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

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

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

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

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

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

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

文章目录

  • 微信小程序开发系列目录
  • 前言
  • behaviors
    • behaviors的定义
    • behaviors的使用
      • 引用外部behaviors
      • 引用内置behaviors
        • wx://form-field
          • 普通页面form组件的submit
          • 自定义组件中form组件的submit
    • 小结
  • selector
    • 什么是selector
    • selector的使用
  • 获取组件实例
  • 总结

前言

上一篇文章中将组件间通信还有一个模块没有学习到,本文继续学习。

behaviors

behaviors 是用于组件间代码共享的特性。

behaviors的定义

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behaviorbehavior 也可以引用其它 behavior

详细的参数含义和使用请参考 Behavior 参考文档。

// my-behavior.js
module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}
})

behaviors的使用

使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。

组件既可以使用外部引入的behavior,也可以使用内置的behavior。

引用外部behaviors

  1. 编写一个behaviors.js文件,注册一个Behavior对象并导出;
  2. 在自定义组件的mytag.js文件导入Behavior对象,然后将导入的Behavior对象填入component的behaviors定义段中;
  3. 在mytag.wxml中简单绑定 自定义组件mytag的属性、data 以及 Behavior对象的属性、data;
// mybehavior.js
module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String,value: 'myBehaviorProperty'}},data: {myBehaviorData: 'myBehaviorData'},methods: {myBehaviorMethod: function(){}}
})
// components/mytag/mytag.js
var myBehavior = require('./mybehavior')
Component({behaviors:[myBehavior],properties: {myTagPro:{type:String,value: 'myTagPro'}},data: {myData:'mytag-data'},methods: {}
})
<!--components/mytag/mytag.wxml-->
<view><view>{{myTagPro}}</view><view>{{myData}}</view><view>{{myBehaviorProperty}}</view><view>{{myBehaviorData}}</view>
</view>

请添加图片描述

通过运行结果可以看出,mytag.wxml可以直接使用myBehavior中的property和data;即被“合并”到mytag组件中了。

引用内置behaviors

自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。

wx://form-field

使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。
详细用法以及代码示例可见:form 组件参考文档

首先我先演示下普通页面中form组件的submit的步骤和效果,作为对比,然后看自定义组件中form组件的submit的实现步骤。

普通页面form组件的submit
<!--index.wxml-->
<form bind:submit="formSubmit"><text>表单</text><input name='姓名' placeholder="请输入姓名"></input> <!--name作为表单提交时的key,支持中文--><input name='密码' placeholder="请输入密码" password="true"></input><button form-type="submit">提交</button>
</form>
// index.js
Page({data:{name:"sif_666",password:"123456"},formSubmit: function(e) {console.info('表单提交携带数据', e.detail.value)}
})

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单中input组件中的 value 值进行提交,需要在input组件中加上 name 来作为 key。运行效果如下:

请添加图片描述

自定义组件中form组件的submit
<!--index.wxml-->
<form bind:submit="formSubmit"><text>自定义组件表单演示</text><custom-form-field name="custom-name"></custom-form-field><button form-type="submit">提交</button>
</form>
// index.js
Page({data:{name:"sif_666",password:"123456"},formSubmit: function(e) {console.info('表单提交携带数据', e.detail.value)}
})
<!--custom-form-field.wxml-->
<input class="cus_input" placeholder="请输入姓名" value="{{cus_name}}" bindinput="onChange" ></input>
Component({behaviors: ['wx://form-field'],data: {cus_name: ''},methods: {onChange: function (e) {console.log(e)this.setData({cus_name: e.detail.value, // 更新cus_name的值value: e.detail.value, //更新"wx://form-field"中value的值})}}
})

由behavior的定义,我们知道,behaviors 是用于组件间代码共享,当组件引用它时,它的属性、数据和方法会被合并到组件中。因此,formdatavalue,也被合并到custom-form-field组件的data中;所以,当点击提交按钮后,在onChange方法中执行this.setData ({value: e.detail.value})将input中输入的数据传递给了index页面的form组件,并在index.js中的formSubmit函数中打印出来。 运行结果如下:

请添加图片描述

wx://form-field-group

wx://form-field-button

wx://component-export

这三个就不再赘述了,behaviors的使用原理通过上面的wx://form-field已经解释的非常清楚了。

小结

关于behaviors,共享就是它的核心,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behaviorbehavior 也可以引用其它 behavior

selector

什么是selector

在当前页面下选择第一个匹配 选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。

selector类似于 CSS 的选择器,但仅支持下列语法。

  • ID选择器:#the-id
  • class选择器(可以连续指定多个):.a-class.another-class
  • 子元素选择器:.the-parent > .the-child
  • 后代选择器:.the-ancestor .the-descendant
  • 跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
  • 多选择器的并集:#a-node, .some-other-nodes

NodesRef SelectorQuery.select(string selector)

参数
string selector

返回值
NodesRef

selector的使用

可在父组件里调用 this.selectComponent ,获取子组件的实例对象。
调用时需要传入一个匹配选择器 selector,如:this.selectComponent(".my-component")

请添加图片描述

从上图可知,通过selectComponent函数可以获取节点对象,以便在代码层面更灵活地控制页面渲染。

请添加图片描述

获取组件实例

有了selector一节的基础,我们知道不仅可以获取自定义组件的实例,还可以获取跨自定义组件的实例。为组件间的通信提供了非常灵活方法。

下面再给出一个结合behaviors和selector的示例。

wx://component-export从基础库版本 2.2.3 开始提供支持。使自定义组件支持 export 定义段。这个定义段可以用于指定组件被 selectComponent 调用时的返回值。

若需要自定义 selectComponent 返回的数据,可使用内置 behavior: wx://component-export;使用该 behavior 时,自定义组件中的 export 定义段将用于 指定 组件被 selectComponent 调用时的返回值。

下面再给出一个结合behaviors和selector的示例。

我们先看一个没有使用behavior: wx://component-export,观察下selectComponent返回的对象;然后再使用behavior: wx://component-export,对比观察下selectComponent返回的对象返回的差异。

请添加图片描述

上图中没有使用behavior,selectComponent返回的是 “原生”的my-child-component实例。

请添加图片描述

使用behavior后,selectComponent返回的是 export()指定的对象。

总结

通过本文的学习,掌握了behaviors的共享特性和获取组件实例的方法,为组件间的通信提供了非常大的操作空间。从这种设计上也可以感知到基于平台的设计,需要考虑给予开发者或使用者充分的灵活性,产生更多的组合,就会有更多应用上的创新。

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

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

相关文章

Web网页开发-初识web-笔记

1.被< >围起来的内容叫做标签 2.DOCTYPE&#xff1a;文件类型 lang:语言 charset&#xff1a;字符集 3.网页中任何效果都需要用标签实现 4.html中不支持回车 5.图片&#xff1a; img:图片标签 src:存放图片的位置 alt&#xff1a;当图片加载不出来时的错误提…

【算法】哈希算法和哈希表

一、哈希算法 哈希算法是一种将任意长度的数据&#xff08;也称为“消息”&#xff09;转换为固定长度字符串&#xff08;也称为“哈希值”或简称“哈希”&#xff09;的数学函数或算法。这个固定长度的字符串是由输入数据通过一系列的运算得到的&#xff0c;并且具有一些重要…

算法通关村第二十关-白银挑战图的存储与遍历

大家好我是苏麟, 今天继续聊图 . 与前面的链表、树等相比&#xff0c;图的存储和遍历要复杂非常多 .所以理解就好 , 面试基本不会让写代码的 . 图的类型多、表示方式多&#xff0c;相关算法也很多&#xff0c;实现又过于复杂&#xff0c;多语言实现难度太大了。这些算法一般理…

C语言之scanf浅析

前言&#xff1a; 当有了变量&#xff0c;我们需要给变量输入值就可以使用scanf函数&#xff0c;如果需要将变量的值输出在屏幕上的时候可以使用printf函数&#xff0c;如&#xff1a; #include <stdio.h> int main() {int score 0;printf("请输⼊成绩:");sc…

软件工程总复习笔记

软件工程课程复习提纲 文章目录 软件工程课程复习提纲一、基本知识点1. 软件工程的概念及目标2. 软件危机的概念及典型表现3. 瀑布模型的概念及特点4. 快速原型模型的特点5. 螺旋模型的基本思想6. 软件生命周期的概念及划分为哪几个阶段7. 软件需求的定义8. 常见的软件需求获取…

Java位运算及移位运算

java中能表示整数数据类型的有byte、short、char、int、long&#xff0c;在计算机中占用的空间使用字节描述&#xff0c;1个字节使用8位二进制表示。 数据类型字节数二进制位数表示范围默认值byte18-27 – 27-10char2160 – 216-1\u0000 (代表字符为空 转成int就是0)short216-…

React16源码: ConcurrentMode的使用及源码实现

ConcurrentMode 1 ) 概述 ConcurrentMode 是 React 16 出来的一个最令人振奋的功能在2018年年初是 Async Mode&#xff0c;在发布了16.6之后&#xff0c;名字进行了更新然后改成了 ConcurrentMode&#xff0c;中间的API有一个过渡的版本&#xff0c;后续会提到它其实是 React…

OpenCV-12绘制图像

OpenCV提供了许多绘制图像的API&#xff0c;可以在图像上绘制各种图形&#xff0c;例如直线&#xff0c;矩形&#xff0c;圆&#xff0c;椭圆等图形。 一、画直线 利用API line&#xff08;img, pt1, pt2, color, thickness, lineType, shift&#xff09;可以绘制直线。 其中…

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 代码下载(1)

本文主要参考&#xff1a; BQ3588C_代码下载 1. 安装依赖工具 安装命令如下&#xff1a; sudo apt-get update && sudo apt-get install binutils git git-lfs gnupg flexbison gperf build-essential zip curl zlib1g-dev gcc-multilib g-multiliblibc6-dev-i386 l…

力扣题目学习笔记(OC + Swift)27.移除元素

移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新…

【编译原理】期末预习做题向I

新的一年希望可以成为更好的人嘿嘿&#xff01; 这一篇基本就是把 up 讲的题都截了一遍然后加了点自己的笔记啥的 O.o &#xff08;不妥的话会删掉的 qwq&#xff0c;希望没事嘿嘿&#xff09; 来源&#xff1a;混子速成 I. 绪论 记住组成部分 II. 前后无关文法和语言 1.…

Python从入门到网络爬虫、自动化

可以创建C、C#、Python、Golang、Java、React、Node、Vue、PHP项目 创建Java项目 创建Python项目 简单if……else……语句 # 简单的if……else……语句 state True if state:print("状态正常") else:print("状态异常")# 复杂的if……elif……语句 score …

粤港澳个人数据跨境流动规则的理解

文章目录 前言一、港澳数据安全的相关背景二、港澳个人数据跨境流动指引三、香港个人资料跨境规则的梳理与解读在本文中主要做以下解读:四、澳门个人资料跨境规则的梳理与解读五、内地与港澳个人数据跨境监管规定比对1、保护目的2、保护对象和监管对象。3、出境活动和出境条件…

周记-20240101

记录一下最近的生活&#xff0c;做一下简单的梳理&#xff0c;具体详细的梳理等我目前的工作步入正轨 以后再开始好好地总结一下2023年的过往经历&#xff0c;总结过去&#xff0c;展望未来。计划一下未来的2024该怎么度过。 最近一阵子都忙着考试&#xff0c;然后从10号以后一…

一骑绝尘!维乐携手骑行侠客轻风逆旅带你解锁冬日逆旅

是逆风冬旅还是冻旅&#xff1f;冬日似乎都被骑友们默认做事应该闭关闭的时间了&#xff0c;空气中萧瑟的寒风仿佛是穿透我们的骨膜&#xff0c;当我还在路上瑟瑟发抖的时候&#xff0c;此时一位公路骑行侠正在开启他的冬日旅途~      以下是来自他的自诉&#xff1a;   …

saas 多租户系统数据隔离方案

关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 1. 回复关键字&#xff1a;数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字&#xff1a;光大银行 下载 光大银行-《商业银行数据资产会计核算研究报告》 3. 回复关键字…

【STM32F103】SysTick系统定时器延时函数

SysTick SysTick是Cortex-M3内核中的一个外设&#xff0c;内嵌在NVIC中&#xff0c;叫系统定时器。 当处理器在调试期间被喊停时&#xff0c;SysTick也将暂停运作。 一共有四个寄存器&#xff0c;不过我们通常用前三个&#xff0c;不需要校准。下图出自《STM32F10xxx Cortex…

关于SIC 的Know-how

SiC的分类和用途 根据电阻率不同&#xff0c;SiC衬底晶片可分为导电型和半绝缘型。 SiC衬底晶片主要用来做成高压功率器件和高频功率器件。其中&#xff0c;导电型SiC衬底晶片经过SiC外延后&#xff08;SiC基SiC外延片&#xff09;&#xff0c;主要应用于制造耐高温、耐高压的…

72内网安全-域横向CSMSF联动及应急响应知识

拿到才行&#xff0c;拿不到就是多余的 案例一MSF&CobaltStrike 联动 Shell 有一些功能可能cs或者msf强大一些&#xff0c;他们两个可以相互调用&#xff0c;在真实情况下也是可以cs和msf同时启动的&#xff0c; cs移交给msf .创建Foreign监听器 “Listeners”“Add”…

蓝桥杯一维差分 | 算法基础

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…