Vue、React和小程序中的组件通信:父传子和子传父的应用
序言:
组件化开发是将一个大型应用程序拆分成独立的、可重用的、可组合的模块,使得开发人员可以快速构建和开发应用程序。组件化开发提倡将应用程序的各个功能模块分离开发,每个模块完成自己的功能并且可以在不同的应用程序中被复用。这可以提高代码的可维护性、可测试性和可重用性,同时也可以使得开发和协作更加高效。其中父传子和子传父是常见的通信方式。
以下是在vue、react、小程序中如何实现父传子和子传父的组件通信。
一、Vue
1. 父传子
在Vue中,父组件通过props属性向子组件传递数据。父组件使用v-bind指令绑定数据到子组件的props上,子组件则通过props接收这些数据并在内部使用。
示例代码:
// 父组件
<template><div><ChildComponent :message="message" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {message: 'Hello Vue!'};},components: {ChildComponent}
};
</script>// 子组件
<template><div>{{ message }}</div>
</template><script>
export default {props: ['message']
};
</script>
2. 子传父:
在Vue中,子组件通过$emit方法触发自定义事件,并将需要传递给父组件的数据作为参数。父组件可以在子组件标签上监听这些自定义事件,并在对应的方法中处理数据。
示例代码:
// 子组件
<template><div><button @click="handleClick">点击按钮</button></div>
</template><script>
export default {methods: {handleClick() {this.$emit('custom-event', 'Hello Parent!');}}
};
</script>// 父组件
<template><div><ChildComponent @custom-event="handleCustomEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {methods: {handleCustomEvent(data) {console.log(data); // 输出:Hello Parent!}},components: {ChildComponent}
};
</script>
二、React
1. 父传子
在React中,父组件通过将属性传递给子组件来实现父传子。父组件将数据作为属性传递给子组件,在子组件中通过this.props访问这些属性。
示例代码:
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';class ParentComponent extends React.Component {render() {return (<div><ChildComponent message="Hello React!" /></div>);}
}// 子组件
import React from 'react';class ChildComponent extends React.Component {render() {return (<div>{this.props.message}</div>);}
}
2. 子传父
在React中,子组件通过调用父组件传递的方法并传递需要传递给父组件的数据来实现子传父。父组件将一个方法作为属性传递给子组件,在子组件中通过调用这个方法并传递参数来触发父组件中对应的处理函数。
示例代码:
// 子组件
import React from 'react';class ChildComponent extends React.Component {handleClick() {this.props.onChildClick('Hello Parent!');}render() {return (<div><button onClick={this.handleClick.bind(this)}>点击按钮</button></div>);}
}// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';class ParentComponent extends React.Component {handle子事件(data) {console.log(data); // 输出:Hello Parent!}render() {return (<div><ChildComponent onChildClick={this.handleChildEvent.bind(this)} /></div>);}
}// 渲染组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
三、小程序
1. 父传子
在小程序中,父组件通过在wxml中使用属性来传递数据给子组件。父组件可以在子组件的标签上设置属性,然后子组件可以通过this.properties接收这些属性。
示例代码:
// 父组件
// parent.wxml
<view><child-component message="{{message}}" />
</view>// parent.js
Page({data: {message: 'Hello Mini Program!'}
});// 子组件
// child-component.wxml
<view>{{ message }}
</view>// child-component.js
Component({properties: {message: String}
});
2. 子传父
在小程序中,子组件通过触发父组件绑定的自定义事件,并将需要传递给父组件的数据作为参数来实现子传父。父组件可以在子组件标签上监听这些自定义事件,并在对应的方法中处理数据。
示例代码:
// 子组件
// child-component.wxml
<view><button bindtap="handleClick">点击按钮</button>
</view>// child-component.js
Component({methods: {handleClick() {this.triggerEvent('customEvent', { data: 'Hello Parent!' });}}
});// 父组件
// parent.wxml
<view><child-component bind:customEvent="handleCustomEvent" />
</view>// parent.js
Page({handleCustomEvent(event) {console.log(event.detail.data); // 输出:Hello Parent!}
});
注意:小程序需要在pages 文件夹下index 页面 (记住是页面)中引入这个组件,引入的时候路径 就不需要在写 index.js 因为文件的默认查找就是 index.js
index.json :
{"componet": true, //开启子组件使用"usingComponents": {"componentA": "../../component/header" //定义子组件名字并引入子组件}
}
结论:本文讲解了在vue、react、小程序中如何进行组件通讯,通过组件化开发可以使自己的代码更加的简介、明了、易维护、易复用、提高开发效率。希望本文对您理解和运用组件通信有所帮助
相关文章:
Vue、React和小程序中的组件通信:父传子和子传父的应用
序言: 组件化开发是将一个大型应用程序拆分成独立的、可重用的、可组合的模块,使得开发人员可以快速构建和开发应用程序。组件化开发提倡将应用程序的各个功能模块分离开发,每个模块完成自己的功能并且可以在不同的应用程序中被复用。这可以…...
leetcode_171Excel表列序号
1. 题意 把excel中列序号字符串转换为10进制数。 Excel表列序号 2. 题解 26进制转10进制 class Solution { public:int titleToNumber(string columnTitle) {int sz columnTitle.size();int ans 0;int base 1;for ( int i sz - 1; ~i; --i){int v columnTitle[i] - A …...
北斗GPS卫星时钟同步服务器在银行数据机房应用
北斗GPS卫星时钟同步服务器在银行数据机房应用 北斗GPS卫星时钟同步服务器在银行数据机房应用 有些银行、政务、公安等重要业务单位,机房是采用屏蔽保密机房,这种情况下的时钟同步装置方案和普通机房的时钟同步方案又是不一样的。下面我们重点介绍保密机…...
Mysql数据库 1. SQL基础语法和操作
一、Mysql逻辑结构 一个数据库软件可以包含许多数据库 一个数据库包含许多表 一个表中包含许多字段(列) 数据库软件——>数据库——>数据表——>字段(列)、元组(行) 二、SQL语言基础语法 1.SQL…...
ChatGPT-GPT4:将AI技术融入科研、绘图与论文写作的实践
2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车,就有可能被淘汰在这个数字化时代,如何能高效地处理文本、文献查阅、PPT…...
SLAM从入门到精通(构建自己的slam包)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 我们学习了很多的开源包,比如hector、gmapping。但其实我们也可以自己编写一个slam包。这么做最大的好处,主要还是可以帮助…...
全球二氧化碳排放数据1deg产品(ODIAC)数据
简介 全球二氧化碳排放数据1deg产品(ODIAC)是一个空间分辨率为1deg*1deg的全球化石燃料燃烧产生的二氧化碳空间分布产品。它率先将基于空间的夜间灯光数据与单个发电厂的排放/位置相结合来估计化石燃料二氧化碳的排放。该产品被国际研究界广泛用于各种研究应用(例如…...
Element-UI 日期选择器--禁用未来日期
在做项目的时候经常会遇到一些报表需要填写日期,一般是填写当日及当日以前,这时候我们的日期选择器就需要进行一些限制,比如: 这样之后,就不会误填写到明天啦,下面让我们看一下代码实现 html页面代码 这里…...
终端常用脚本命令
Mac编写shell脚本文件 Rvm切换Ruby Mac系统指定更新 Mac应用安装:允许任何来源 Mac终端常用命令与Vim常用命令 Mac退出VIM模式 git协议实现管理(三个步骤) GIT 常用命令 .gitignore git工具常用操作指令 prettier前端本地格式化工具 SourceTree撤销Commit提交 pod i…...
百度翻译很方便,几点注意事项
前几天修改资源,就想翻译一些字串。用了一下百度,还是很方便的。 昨天开通了开发者账号,试了一下批量翻译。也发现了一些问题: 有的语言不支持,如ben/tr/jav好像没有区分地区。也可能是我还不熟悉。使用太多会欠费。比…...
阿里云安装 redis
1、在opt目录下面安装redis https://download.redis.io/redis-stable.tar.gz redis的最新稳定版本。更多版本可见 redis cd /opt wget https://download.redis.io/redis-stable.tar.gz2、解压tar包,会生成redis-stable文件夹 tar -xzvf redis-stable.tar.gz3、安装…...
解释什么是异步非阻塞?
在IO和网络编程中,我们经常看到几个概念:同步、异步、阻塞、非阻塞。 同步和异步 同步和异步是针对应用程序和内核的交互而言的,同步指的是用户进程触发IO 操作并等待或者轮询的去查看IO 操作是否就绪,而异步是指用户进程触发…...
1024程序节特辑:一文读懂小程序支付流程
小程序支付流程 概述前置准备登录流程调用wx.login()向微信服务器发送请求 支付流程调用wx.requestPayment()部分后台处理逻辑支付功能要求 支付流程面试题 主页传送门:📀 传送 概述 小程序支付是由微信支付推出的一种便捷支付方式,通过扫码…...
C- 使用原子变量实现信号量
信号量 信号量(Semaphore)是并发编程中的一个核心同步原语,它在多进程和多线程环境下被设计用来协调不同的执行单元,确保它们在对共享资源的访问上达到同步和互斥。信号量内部维护一个计数器,该计数器的初始值可以被视…...
Pytorch与Onnx的转换与推理
Open Neural Network Exchange(ONNX,开放神经网络交换)格式,是一个用于表示深度学习模型的标准,可使模型在不同框架之间进行转移。 一、pytorch模型保存/加载 有两种方式可用于保存/加载pytorch模型 1)文件…...
Linux权限详解
文章目录 1. shell命令及运行原理2. Linux权限的概念(1)用户种类(2)切换用户(3)命令提权 3. Linux权限管理(1)文件访问者的分类(人)(2)…...
基于react18+arco+zustand通用后台管理系统React18Admin
React-Arco-Admin轻量级后台管理系统解决方案 基于vite4构建react18后台项目ReactAdmin。使用了reactarco-designzustandbizcharts等技术架构非凡后台管理框架。支持 dark/light主题、i18n国际化、动态路由鉴权、3种经典布局、tabs路由标签 等功能。 技术框架 编辑器ÿ…...
BAT031:按列表名单将路径a下的文件夹批量剪切到路径b
引言:编写批处理程序,实现按列表名单将路径a下的文件夹批量剪切到路径b。 一、新建Windows批处理文件 参考博客: CSDNhttps://mp.csdn.net/mp_blog/creation/editor/132137544 二、写入批处理代码 1.右键新建的批处理文件,点击…...
随机专享记录第一话 -- RustDesk的自我搭建和使用
1.介绍 RustDesk是继TeamView、向日葵等远程桌面软件后的新起之秀,最主要的是开源的可自己搭建中继服务。相比于公共服务器,连接一次等待的时间要多久,用过TeamView的都知道,而且还是免费的,不像某些远程搞各种个人证书,各种登录设备限制! 先看看软件图,这是待连接界…...
【数据库】拼接字段 使用别名
拼接字段 使用别名 e . g . e.g. e.g. Vendors 表包含供应商名和电话信息,name 和 mobile;需要输出这两个属性的值的组合作为供应商的基本信息组合。 SELECT concat(name, _, mobile) FROM Vendors; -- 语句通过 MySQL 环境下测试,其他 DBMS…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门  bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
