微信小程序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,一经查实,立即删除!

相关文章

微信小程序常用的api

基础API&#xff1a; wx.request&#xff1a;用于发起网络请求&#xff0c;支持GET、POST等方式&#xff0c;是获取网络数据的主要手段。wx.showToast&#xff1a;显示消息提示框&#xff0c;通常用于向用户展示操作成功、失败或加载中等状态。wx.showModal&#xff1a;显示模态…

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;四步实现&…

【Go 数据结构】树与哈希表的具体实现

树 树是一种由 n 个有限节点组成的具有层次关系的集合。 树的定义&#xff1a; 节点之间有层次关系&#xff0c;分为父节点和子节点有唯一一个的根节点&#xff0c;该节点没有父节点除了根节点&#xff0c;每个节点有且只有一个父节点每一个节点本身以及它的后代也是一棵树&…

爬虫工具you-get

you-get是一个简单易上手的爬虫小工具&#xff0c;可以从网络中爬取多媒体信息&#xff0c;包括图片、音频和视频。you-get的github项目地址为&#xff1a;https://github.com/soimort/you-get 一、安装 以下为相关依赖&#xff0c;需要分别安装&#xff1a; Python 3 (必须…

补一 继承的使用

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

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

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

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

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

rdflib triples 匹配始终为空的问题

写代码的时候遇到了一个问题&#xff0c;花了好长时间解决&#xff0c;记录一下&#xff0c;避免再出问题 完整代码如下所示&#xff1a; # 导入用于处理文件的标准库 import os from rdflib import Graph, URIRef # 指定要创建的TTL文件的名称 filename "example.ttl&q…

详细解读自动化测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 软件测试是软件开发过程中一个必不可少的环节。传统的软件测试方…

抓取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; 该方法的阈值选取标准取决于图像中最大化分 割的目标区域和背景区域…

leetcode 1 ~ 100

文章目录 1. 两数之和&#xff08;用哈希表减少查找的时间复杂度&#xff09;2. 两数相加&#xff08;高精度加法&#xff09;3.无重复字符的最长子串&#xff1a;&#xff08;模板&#xff1a;经典的滑动窗口算法&#xff09;5. 最长回文子串&#xff08;枚举&#xff09;6. Z…

STM32F1#1(入门了解)

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

前端项目学习记录2:sass的使用

1.安装sass pnpm i sass2.配置vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import path from "path"; //引入svg需要用到的插件 import { createSvgIconsPlugin } from vite-plugin-svg-icons export default defineConf…

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

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