微信小程序组件间通讯

news2024/12/23 23:10:21

1.父传子

1.1父组件

1.1.1wxml文件

<!-- 定义的my-props组件 -->
<my-props count="{{count}}"></my-props>
<!-- 分割线 -->
<view></view>
<view>父组件的count值:{{count}}</view>
<button bindtap="addChange">+1</button>

1.1.2静态页面 

 

 

1.2子组件

1.2.1js文件

说明:接受父组件传来的数据

  properties: {
    count: Number
  },

1.2.2wxml文件

<view>子组件收到count:{{count}}</view>

1.2.3界面展示

 

2.子传父

说明:子传父也就是给子组件标签绑定一个自定义函数。

2.1父组件wxml文件

<my-emit bind:fredom="asyncfredom"></my-emit>
<view>父组件:{{name}}</view>

说明:父组件绑定自定义函数,函数名为asyncfredom。

2.2子组件wxml文件

<view>子组件:{{name}}</view>
<button bindtap="sendMessage">点击我向父组件发送数据</button>

2.3子组件js文件  

  data: {
    name: "李四"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 触发自定义事件
    sendMessage() {
      this.triggerEvent("fredom", {
        name: this.data.name
      })
    }
  }
})

说明:触发自定义事件向父组件传递数据 。 

 2.4.父组件js文件

    data: {
    name: ""
  },
asyncfredom(e) {
    console.log(e);
    this.setData({

      name: e.detail.name
    })
  },

2.5界面展示

点击后

 

 

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

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

相关文章

一步一步学OAK之五:通过OAK相机实现边缘检测

目录 边缘检测简介Setup 1: 创建文件Setup 2: 安装依赖Setup 3: 导入需要的包Setup 4: 创建pipelineSetup 5: 创建节点创建相机节点创建边缘检测节点创建XLinkOut数据交互的节点 Setup 6:设置相关属性设置彩色相机的相关属性设置左侧和右侧的单目相机的相关属性设置边缘检测器的…

【计算机网络 - 第三章】运输层

目录 一、多路复用和多路分解 1、运输层端口号 2、概述 3、原理 1、无连接的多路复用与多路分解 - UDP 2、面向连接的多路复用与多路分解 - TCP 二、无连接运输——UDP用户数据报协议 1、UDP概述 2、UDP的优点 三、可靠数据传输原理 1、概述 2、rdt1.0——可靠信道上…

【AUTOSAR】BMS开发实际项目讲解(十一)----电池管理系统相关项功能安全要求

相关项功能安全要求 SG-BMS-1 : BMS系统应防止电池单体过充导致热失控&#xff08;ASIL C&#xff09; 功能框图&#xff08;SG-BMS-1&#xff09; 功能组件说明 功能组件ID 功能组件名称 描述 ASIL等级 FSC-FC-01 Detection Cell Volt&Temp 采集表征单体电压和温度的…

Qt中QCompleter自动补全功能

在Qt中有QCompleter这个类可以和QLineEdit组合实现自动补全功能&#xff0c;类似搜索框形式的&#xff0c; 1.QCompleter类可以在输入框输入字符时&#xff0c;进行提示可以匹配上的字符 例&#xff1a;为QLineEdit设置自动补全QLineEdit* pLineEdit new QLineEdit(this);QStr…

【算法】最长递增子序列:动态规划贪心+二分查找

文章目录 最长递增子序列解法一&#xff1a;动态规划解法二&#xff1a;LIS 和 LCS 的关系解法三&#xff1a;贪心 二分查找 相关题目673. 最长递增子序列的个数 https://leetcode.cn/problems/number-of-longest-increasing-subsequence/1964. 找出到每个位置为止最长的有效障…

29.组件库 Element UI

Element UI是PC端常用的组件库&#xff0c;支持vue2与vue3&#xff0c;vue2项目使用的叫 Element UI,vue3使用的叫 Elements Plus&#xff0c;官网地址 一个 Vue 3 UI 框架 | Element Plus 我们下面的代码都是以vue3为例 目录 1 安装 2 引入 3 使用 1 安装 2 引入 完…

快消EDI:联合利华Unilever EDI需求分析

联合利华&#xff08;Unilever&#xff09;是一家跨国消费品公司&#xff0c;总部位于英国和荷兰&#xff0c;在全球范围内经营着众多知名品牌&#xff0c;涵盖了食品、饮料、清洁剂、个人护理产品等多个领域。作为一家跨国公司&#xff0c;联合利华在全球各地都有业务和生产基…

el-table表单一键展开折叠,展开部分后一键全部展开或折叠

实现功能&#xff1a; 1.表单一键展开或者一键折叠 2.表单点击展开一部分后&#xff0c;再次点击展开或折叠按钮可以全部展开或全部折叠 3.完整代码在最后 1.建立el-table的树形结构 1.ref"table"&#xff0c;用节点绑定的方式实现 2.data&#xff1a;树形结构…

Redis系列--数据过期清除策略缓存淘汰策略

一、过期策略 一、前言 Redis 所有的数据结构都可以设置过期时间&#xff0c;时间一到&#xff0c;就会自动删除。可以想象里面有一个专门删除过期数据的线程&#xff0c;数据已过期就立马删除。这个时候可以思考一下&#xff0c;会不会因为同一时间太多的 key 过期&#xff0…

windows电脑设置每天自动关机

有时候我们需要我们的笔记本或者电脑在每天固定的时间自动关机&#xff0c;但是windows本身是没有带这个设置的&#xff0c;下面记录下如何设置电脑每天自动关机&#xff0c;无需安装任何第三方软件&#xff1b; 文章目录 一、设置自动关机程序二、取消自动关机三、Windows任务…

chatgpt赋能python:Python连接表

Python连接表 Python作为一种高级编程语言&#xff0c;可以用于各种各样的任务。其中之一就是连接表格数据。连接表是在数据管理中非常重要的概念&#xff0c;因为它可以将不同表格中的数据合并在一起&#xff0c;从而使我们能够更好地分析和理解数据。在这篇文章中&#xff0…

蓝桥杯专题-试题版含答案-【猜算式】【排列序数】【还款计算】【滑动解锁】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

探索Gradio的CheckboxGroup模块:交互式多选框组件

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

详解金融机构敏捷营销落地:体系架构、关键技术和实施方法

本文根据 2023 年金融营销科技价值发现论坛中&#xff0c;神策数据金融首席架构师王仕的主题演讲整理所得&#xff0c;聚焦营销 5.0 理念下的敏捷营销&#xff0c;详细讲解金融机构落地时涉及到的体系架构、关键技术及实施方法。 根据国家发改委官网披露的数据&#xff0c;2022…

macOS编译AirMap开源全景图源码image-processing

1.克隆源码 git clone --recursive https://github.com/airmap/image-processing.git 2. 使用CLion打开CMakeLists.txt并做为工程打开 2.默认配置名为Default,可修改,下面的所有配置项都可改 3.点击OK后会自动生成

青翼自研--4通道DAC播放子卡产品数据手册

FMC131是一款4通道3GSPS采样率或者2通道6GSPS采样率16位DA播放FMC子卡模块&#xff0c;该板卡为FMC标准&#xff0c;符合VITA57.4规范&#xff0c;可以作为一个理想的IO模块耦合至FPGA前端&#xff0c;16通道的JESD204B接口通过FMC连接器连接至FPGA的高速串行端口GTH。插值模式…

突破性5G NTN技术,美格智能携手高通发布卫星物联网连接方案

通信技术的快速发展&#xff0c;使得万物互联成为现实&#xff0c;物联网深刻影响我们的生活方式。目前&#xff0c;全球物联网连接主要由WiFi、蓝牙和蜂窝网络等几类技术支撑。数据显示&#xff0c;蜂窝基站的陆地覆盖率约为20%&#xff0c;而海洋覆盖率则不到5%。 这意味着陆…

十大编程算法

算法一&#xff1a;快速排序算法 快速排序是由东尼霍尔所发展的一种排序算法。在平均状况下&#xff0c;排序 n 个项目要Ο(n log n)次比较。在最坏状况下则需要Ο(n2)次比较&#xff0c;但这种状况并不常见。事实上&#xff0c;快速排序通常明显比其他Ο(n log n) 算法更快&a…

uni-app/vue 文字转语音朗读(附小程序语音识别和朗读)

语音播报的实现的方法有很多种&#xff0c;我这里介绍集中不引用百度、阿里或者迅飞的API的实现方式。 一、采用new SpeechSynthesisUtterance的方式 废话不多说直接上代码 data() {return {utterThis:null,} },//方法使用this.utterThis new SpeechSynthesisUtterance(); …

地下水管三维可视化综合管控平台提升政府服务质量

随着当前互联网技术数据的快速发展和增长&#xff0c;总数越来越大&#xff0c;结构越来越复杂。如果你想更清楚、更快地理解和理解数据&#xff0c;传统的二维平面图数据图性能不能满足需求。 什么是三维可视化? 三维可视化是一种利用计算机技术&#xff0c;再现三维世界中的…