微信小程序16: 组件通信

父子组件之间的通信

父子组件通信一共有三种方式

  1. 属性绑定
    1. 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据
  2. 事件绑定
    1. 用于子组件向父组件传递数据,可以传递任意数据
  3. 获取组件实例
    1. 父组件还可以通过this.selectComponent()获取子组件的实例对象
    2. 这样可以访问子组件的任意数据和方法

属性绑定

:::info
父组件向子传值
:::
属性绑定用于实现父向子传值,而且智能传递普通的类型的数据,无法将方法进行传递。

//父组件定义data数据节点
data:{count:0
}//父组件的wxml结构
<!-- 父组件向子组件传递count值 -->
<mytest1 count="{{count}}"></mytest1>
<view></view>
<view>父组件的count值为{{count}}</view>

在子组件内部需要声明对应的属性并使用

// 子组件的properties节点
properties:{count: Number
}// 子组件的wxml结构
<text>子组件中,countr值为{{count}}</text>

事件绑定

:::info
事件绑定用于实现子向父传值,可以传递任何类型的数据
:::

  1. 在父组件中的js,定义一个函数,这个函数通过自定义事件的形式,传递给子组件
//在父组件中定义 syncount方法
// 将来,这个会被传递给子组件,供子组件调用
syncCount(){console.log("syncount");
},
  1. 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件,定义自定义事件sync
<mytest1 count="{{count}}" bind:sync="syncCount"><view slot="slot1">我是插槽1的内容 </view><view slot="slot2">我是插槽2的内容 </view>
</mytest1>
  1. 在子组件的js中,通过调用this.triggerEvent(“自定义事件名称”,{/参数对象/}),将数据发送到父组件,我想实现在子组件中增加树脂,然后把增加的值在复组件中显示,类似一两个页面中的数据绑定
/*** 组件的方法列表*/
methods: {addnumber(){this.setData({count:this.properties.count+=1})// 触发自定义事件实现把传过来的值将数同步个父组件this.triggerEvent('sync',{value:this.properties.count})}
}
  1. 在父组件的js中,通过e.detail获取到子组件传递过来的数据
 //在父组件中定义 syncount方法// 将来,这个会被传递给子组件,供子组件调用syncCount(e){console.log("syncount");console.log(e.detail.value);this.setData({count:e.detail.value})},

获取组件实例方式进行父子组件通信

可以在父组件里调用this.selectComponent(“id或class选择器”),获取子组件的对象,从而直接访问子组件的任意方法。调用时需要传递一个选择器,例如this.selectComponent(“.my-component”).

//wxml结构
<view>我是父组件中的值:{{count}}<mytest1 count="{{count}}" bind:sync="syncCount"class="childName1"id="childName1"><view slot="slot1">我是插槽1的内容 </view><view slot="slot2">我是插槽2的内容 </view></mytest1>
</view>
<button bind:tap="getChild">获取子组件的实例对象</button>
//定义事件处理函数
getChild(){const child = this.selectComponent('.childName1')console.log(child);
},

这时候点击按钮可以看到获取到了子组件的很多信息
我们可以设定点击按钮给子组件count传值让它自增加2

getChild(){const child = this.selectComponent('.childName1')console.log(child);child.setData({count: child.properties.count+2})
},

不仅如此,我们还可以调用子组件中已经定义的方法,在打印出的内容中可以看到
CleanShot 2024-05-07 at 10.29.14.png
在原型中有我们之前定义的addnumber方法,我们可以尝试调用,可以成功调用

  getChild(){const child = this.selectComponent('.childName1')console.log(child);child.addnumber()},

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

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

相关文章

vue 语法2

【5】条件渲染和列表渲染 &#xff08;1&#xff09;条件渲染v-if v-else-if v-else 条件渲染根据表达式的真假值来渲染不同的元素或组件。 v-if&#xff1a;当表达式的值为真时&#xff0c;渲染该元素或组件。 v-else-if&#xff1a;当前面的 v-if 或 v-else-if 的表达式为假…

【机器视觉】C# .NET 8 部署yolov9 onnx对象检测

这段代码展示了一个使用YOLOv9进行对象检测的简单测试框架。代码主体以及其功能分为以下几个关键部分&#xff1a; 创建测试图片数组 _testImages&#xff0c;它包含了图片文件名和对应的标签。使用 buildTests 方法来从给定的文件名中加载图片并调整尺寸&#xff0c;准备测试数…

linux数据备份与恢复

目录 前言 1、数据备份和恢复中的两个关键性指标 2、linux系统的定时任务 1&#xff09;本地定时任务crontab 在实验测试过程中&#xff0c;遇到多次crontab任务不执行问题 &#xff0c;总结下来主要有几个方面原因&#xff1a; 2)分布式定时任务系统Jenkins 3、备份存储…

如何用二维码实现现代仓库管理?(附详细实现过程)

简道云团队曾参与过近300企业的仓库管理软件的部署&#xff0c;要想知道如何实现用二维码管理仓库&#xff0c;首先要对整体流程有清晰的框架&#xff01; 1、产品数据的录入2、设计电子库存卡3、库存盘点单4、库存盘点报表 总结一下就是——数卡单表&#xff0c;四步实现&…

补一 继承的使用

继承的关键词为extends 模型为 public class 子类 extends 父类

中国热门高端dating约会交友软件有哪些?国内权威Dating App红黑排行榜推荐

在dating 软件刷了无数个男人后终于脱单啦&#xff0c;跟大家分享一些我的个人感受 1、二狗 颜值⭐️⭐️⭐️ 真实性 ⭐️⭐️⭐️⭐️⭐️ 用户质量⭐️⭐️⭐️⭐️ ⭕️优点&#xff1a;整体用户质量较高&#xff0c;用户集中在金融、互联网和体制内行业。用户需进行学历、…

速来get!多微信聚合聊天功能大揭秘!

随着网络时代的发展&#xff0c;微信成为了职场中不可或缺的沟通工具&#xff0c;很多人都有着多个微信号&#xff0c;而要想高效管理这些账号&#xff0c;那就少不了工具的帮忙。 通过微信管理系统&#xff0c;可以轻松实现多个微信号聚合聊天&#xff0c;提高沟通效率。 1、…

抓取Google时被屏蔽怎么办?如何避免?

在当今数字化时代&#xff0c;数据采集和网络爬取已成为许多企业和个人必不可少的业务活动。对于爬取搜索引擎数据&#xff0c;特别是Google&#xff0c;使用代理IP是常见的手段。然而&#xff0c;使用代理抓取Google并不是一件轻松的事情&#xff0c;有许多常见的误区可能会导…

顶顶通呼叫中心中间件电话黑名单系统介绍

黑名单 有显示成功和失败导入数&#xff0c;可以禁用也可以启用&#xff0c;如果禁用状态就是不使用这一组黑名单&#xff0c;多个号码核验就是验证号码存不存在。黑名单只有管理员和操作员可以配置&#xff0c;租户是看不到黑名单的。但是黑名单跟租户是互通的。 可以单个号码…

【智能算法应用】基于麻雀搜索算法的二维最大熵图像阈值分割

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 最大熵法是由 Kapur 于 1985 年所提出的&#xff0c; 该方法的阈值选取标准取决于图像中最大化分 割的目标区域和背景区域…

STM32F1#1(入门了解)

一、STM32开发平台和工具 1.1 STM32芯片介绍 典型微控制器由CPU&#xff08;运算器、控制器&#xff09;、RAM、ROM和输入输出组成。 1.2 STM32核心板 STM32核心板配件&#xff1a; ①JTAG/SWD仿真-下载器 ②通信-下载模块 ③OLED显示屏 1&#xff09; 通信-下载模…

spring的高阶使用技巧1——ApplicationListener注册监听器的使用

Spring中的监听器&#xff0c;高阶开发工作者应该都耳熟能详。在 Spring 框架中&#xff0c;这个接口允许开发者注册监听器来监听应用程序中发布的事件。Spring的事件处理机制提供了一种观察者模式的实现&#xff0c;允许应用程序组件之间进行松耦合的通信。 更详细的介绍和使…

海外市场成 ISV 新掘金地?生成式 AI 如何加速业务创新实践?Zilliz 有话说

期望了解 Zilliz 最新动态&#xff1f;想要与 Zilliz 线下探讨 AI 时代向量数据库的全球化布局思考及典型实践&#xff1f; 机会来啦&#xff01;5 月 10 日&#xff0c;Zilliz 将闪现亚马逊云科技的两场活动现场&#xff08;苏州、西安&#xff09;&#xff0c;与大家共话行业…

Ubuntu将软件图标添加到应用列表

一.简介snap snap和yum&#xff0c;apt一样都是安装包工具&#xff0c;但是snap里的软件源是自动更新到最新版本&#xff0c;最好用 比如Ubuntu的软件商城就是使用的snap软件包 二. Ubuntu软件商城更新 1.ps -ef | grep snap-store 查询并kill snap-store的所有进程 2.sudo …

【仪酷LabVIEW AI工具包案例】使用LabVIEW AI工具包+YOLOv5结合Dobot机械臂实现智能垃圾分类

‍‍&#x1f3e1;博客主页&#xff1a; virobotics(仪酷智能)&#xff1a;LabVIEW深度学习、人工智能博主 &#x1f384;所属专栏&#xff1a;『仪酷LabVIEW AI工具包案例』 &#x1f4d1;上期文章&#xff1a;『【YOLOv9】实战二&#xff1a;手把手教你使用TensorRT实现YOLOv…

C++之STL-priority_queue和仿函数的讲解

目录 一、priority_queue的介绍和使用 1.1 priority_queue的介绍 1.2 priority_queue的基本接口 二、仿函数的介绍 2.1 基本概念 2.2 适用场景 三、模拟实现priority_queue 3.1 向上调整算法 3.2 向下调整算法 3.3 整体框架 一、priority_queue的介绍和使用 1.1 prio…

基于卷积神经网络的一维信号降噪(简单版,MATLAB)

简单演示一下基于卷积神经网络的一维信号降噪&#xff0c;有个大致印象即可。 %% Plot the previous training CNN. set_plot_defaults(on) load(denoiser_sparse.mat); h1{1} double(conv1); h1{2} double(conv2); h1{3} reshape(double(conv3),[8,1,17]); figure(1) [r,c…

Java_异常

介绍 编译时异常&#xff1a; 除RuntimeException和他的子类&#xff0c;其他都是编译时异常。编译阶段需要进行处理&#xff0c;作用在于提醒程序眼 运行时异常&#xff1a; RuntimeException本身和其所有子类&#xff0c;都是运行时异常。编译阶段不报错&#xff0c;是程序…

Java17 --- SpringCloud之Nacos

目录 一、下载nacos并运行 1.1、创建9001微服务作为提供者 1.2、创建80微服务作为消费者 二、naocs配置中心规则与动态刷新 2.1、创建3377微服务 2.2、在nacos中创建配置文件 三、nacos数据模型之Namespace-Group-Datald 3.1、DatalD方案 3.2、Group方案 3.3、Name…