子传父vue/react

vue子传父:很多都是结合defineEmit来实现的,这里通过给子组件传递函数,子组件调用传递下来的函数实现传值。

父亲:

<template><div>father<Demo :clickChild="clickFather" msg="32434">Welcome to Your Vue.js App</Demo></div>
</template>
<script setup>
import Demo from './Demo.vue'const clickFather = (e) => {console.log(e)}
</script>

儿子:

<template><div @click="clickToFather">childStart {{ msg }} childEnd</div>
</template>
<script setup>
import { ref, defineProps } from "vue";
const count = ref(0);
const props = defineProps({msg: String,clickChild: Function,
});const clickToFather = () => {console.log("props", props);console.log("clickToFather", props.msg);props.clickChild && props.clickChild("22222");
};
</script>

react;同样的react也可以通过调用传递下来的函数的方式实现子传父

父:

import React, { useState } from 'react';
import ChildComponent from './Bpp';const ParentComponent = () => {const handleDataFromChild = (data) => {console.log(data);}return (<div><button onClick={handleDataFromChild}>66666666</button><ChildComponent data={"123"} onDataFromChild={handleDataFromChild} /></div>);
}export default ParentComponent;

子:

import React from "react";const ChildComponent = (props) => {console.log(props);const sendDataToParent = () => {props.onDataFromChild('000');};return (<div><button onClick={sendDataToParent}>Send Data to Parent</button></div>);
};export default ChildComponent;

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

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

相关文章

边缘计算网关究竟是什么呢?它又有什么作用呢?-天拓四方

在数字化时代&#xff0c;信息的传输与处理变得愈发重要&#xff0c;而其中的关键节点之一便是边缘计算网关。这一先进的网络设备&#xff0c;不仅扩展了云端功能至本地边缘设备&#xff0c;还使得边缘设备能够自主、快速地响应本地事件&#xff0c;提供了低延时、低成本、隐私…

基本的数据类型在16位、32位和64位机上所占的字节大小

1、目前常用的机器都是32位和64位的&#xff0c;但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。 数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…

Linux命令学习—linux 下的用户和组的管理(下)

1.2、组的管理 1.2.1、组相关文件介绍 ①、/etc/group 用户组的特性在系统管理中为系统管理员提供了极大的方便&#xff0c;但安全性也是值得关注的&#xff0c;如某个用户 下有对系统管理有最重要的内容&#xff0c;最好让用户拥有独立的用户组&#xff0c;或者是把用户下的…

Go程序设计语言 学习笔记 第十一章 测试

1949年&#xff0c;EDSAC&#xff08;第一台存储程序计算机&#xff09;的开发者莫里斯威尔克斯在他的实验室楼梯上攀登时突然领悟到一件令人震惊的事情。在《一位计算机先驱的回忆录》中&#xff0c;他回忆道&#xff1a;“我突然完全意识到&#xff0c;我余生中的很大一部分时…

SpringCloudalibaba之Nacos的配置管理

Nacos的配置管理 放个妹子能增加访问量&#xff1f; 动态配置服务 动态配置服务可以让您以中心化、外部化和动态化的方式管理所有环境的应用配置和服务配置。 动态配置消除了配置变更时重新部署应用和服务的需要&#xff0c;让配置管理变得更加高效和敏捷。 配置中心化管…

Redis: 内存回收

文章目录 一、过期键删除策略1、惰性删除2、定时删除3、定期删除4、Redis的过期键删除策略 二、内存淘汰策略1、设置过期键的内存淘汰策略2、全库键的内存淘汰策略 一、过期键删除策略 1、惰性删除 顾名思义并不是在TTL到期后就立即删除&#xff0c;而是在访问一个key的时候&…

计算机网络----第十二天

交换机端口安全技术和链路聚合技术 1、端口隔离技术&#xff1a; 用于在同vlan内部隔离用户&#xff1b; 同一隔离组端口不能通讯&#xff0c;不同隔离组端口可以通讯; 2、链路聚合技术&#xff1a; 含义&#xff1a;把连接到同一台交换机的多个物理端口捆绑为一个逻辑端口…

武林风云之一个shell同时维护多个设备

仅以此文纪念linux中国 小y最近真的颓废了&#xff0c;马上就三十了&#xff0c;一下班整个人跟个废物一样&#xff0c;躺在住处刷B站&#xff0c;太颓废了。哎&#xff0c;我想这今年就收手博客了&#xff0c;后续不再更新。但是人不能这样&#xff0c;人需要和懒惰做斗争&…

Python学习笔记25 - 一些案例

1. 输出金陵前五钗 2. 向文件输出信息 3. 打印彩色字 4. print函数、进制转换 5. 猜数游戏 6. 输出ASCII码对应的字符 7. 计算100~999之间的水仙花数 8. 千年虫数组的索引及其值 9. 星座zip dict 10. 12306车次信息 11. 字符串的格式化 12. 手动抛出异常 13. 计算圆的面积和周长…

源码安装 clr - hip runtime

1&#xff0c;下载 HIP 源代码 git clone --recursive https://github.com/ROCm/HIP.git cd HIP/ git checkout rocm-6.0.2 pwd export HIP_COMMON_DIR${PWD} cd ../ 2&#xff0c;下载 clr 源码 git clone --recursive https://github.com/ROCm-Developer-Tools/clr.git cd c…

杰发科技AC7840——CAN通信简介(4)_过滤器设置

0. 简介 注意&#xff1a;过滤器最高三位用不到&#xff0c;因此最高位随意设置不影响过滤器。 1. 代码分析 注意设置过滤器数量 解释的有点看不懂 详细解释...也看不大懂 Mask的第0位是0&#xff0c;其他位都是1(就是F?)&#xff0c;那就指定了接收值就是这个数&#xff0c;…

Qt状态机

基本概念 QStateMachine&#xff1a;管理一组状态和转换的状态机。QState&#xff1a;表示状态机中的一个状态。QSignalTransition&#xff1a;根据发射的信号触发状态之间的转换。 示例逻辑 假设您有三个主要状态&#xff1a;值守&#xff08;Daemon&#xff09;、做样&…

小程序 安卓连接wifi成功,提示消息为失败

解决方案&#xff1a; forceNewApi: true, uni.connectWifi({forceNewApi: true,SSID: this.SSID,password: this.password,success: (res) > {console.log(res, "连接成功");},fail: (err) > {console.log(err);},}); 加上这话就返回正常数据了

版本控制工具Git的使用

1、Git的基本概念和使用 1、Git是什么? ● Git: 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理。 ● GitHub: 全球最大的面向开源及私有软件项目的托管平台,免费注册并且可以免费托管开源代码。 ● GitLab:与GitHub类似&a…

二分查找的边界问题是怎么产生的?

总结&#xff1a;二分查找的目标有两个&#xff0c;一个是左区件的右边界&#xff0c;一个是右区间的左边界 如何去理解二分的过程&#xff1f; 如果要查找的是左区间的右边界&#xff1a; 可以将[l, r]理解一个集合&#xff0c;这个集合范围内的数都有可能是最后需要得到的…

打不动的蓝桥杯

打不动的蓝桥杯 2024-4-13 今天的蓝桥杯打得很烂&#xff0c;8题写了4题&#xff0c;100分可能有20来分吧。我写了的题好像都很简单&#xff0c;没什么竞争力。又觉得我知道的东西不止这么点&#xff0c;没能发挥。 这次比赛&#xff0c;首先&#xff0c;有强烈的陌生感。pytho…

【C++核心】C++中的对象

C中的对象 一、对象的初始化和清理1. 构造函数和析构函数1.1 构造函数简介1.2 构造函数1.3 析构函数1.4 代码样例1.5 默认实现 2. 构造函数的分类及调用2.1 构造函数的分类2.2 构造函数的调用方式2.3 匿名函数 3. 拷贝构造函数调用时机4. 构造函数的规则5. 深拷贝和浅拷贝6. 初…

ChatGLM3初体验

mac本地化部署ChatGLM3 写在前面环境准备1. python环境2. 安装第三方依赖torch3.下载模型 代码准备1.clone代码 run效果 写在前面 建议直接去看官方文档 https://github.com/THUDM/ChatGLM3?tabreadme-ov-file 环境准备 1. python环境 python -V ## 3.11.42. 安装第三方依…

标注平台工作流:如何提高训练数据质量与管理效率

世界发展日益依托数据的驱动&#xff0c;企业发现&#xff0c;管理不断增长的数据集却愈发困难。数据标注是诸多行业的一个关键过程&#xff0c;其中包括机器学习、计算机视觉和自然语言处理。对于大型语言模型&#xff08;LLM&#xff09;来说尤是如此&#xff0c;大型语言模型…

前端面试问题汇总 - Vue篇

1. Vue 的生命周期有哪些&#xff0c;每个阶段分别做什么操作&#xff1f; beforeCreate&#xff1a; 在实例初始化之后、数据观测和事件配置之前被调用。此时数据对象 data 和事件&#xff08;methods&#xff09;都还未初始化。一般不在此阶段进行数据初始化和 DOM 操作。cre…