如何在vue中实现父子通信
1.需要用到的组件
父组件
<template><div id="app"><BaseCount :count="count" @changeCount="cahngeCount"></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue';export default {components:{BaseCount},data(){return{count:100}},methods:{cahngeCount(value){this.count = value}}
}
</script><style></style>
子组件
<template><div class="base-count"><button @click="sub">-</button><span>{{ count }}</span><button @click="add">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改 (谁的数据 谁负责)// data () {// return {// count: 100,// }// },// 2.外部传过来的数据 不能随便修改// 第一种方式// props:['count'] // 第二种方式// props:{// count:Number // },// 第三种方式props:{count:{type:Number, // 类型require:true, // 是否必填default:0, // 默认值validator(vlaue){if(vlaue) // 自定义函数 false 不通过 true 通过return true}}},methods:{sub(){this.$emit('changeCount',this.count - 1)},add(){this.$emit('changeCount',this.count + 1)}}}
</script><style>
.base-count {margin: 20px;
}
</style>
2.父传子,通过props
1.在父组件中注册子组件,并使用

2. 在子组件中得到父组件的传递值

3. 在子组件中收集数据并使用


4. 注意点
1.收集数据时,v-bind绑定的属性值,应该与props中的键值对中的键相同
2. props中有3种数据收集方式,使用时需注意
2. 子传父,通过this.$emit
1.通过点击事件绑定函数

2. 对函数进行处理

3. 对子组件的传递的事件进行监听并用函数处理


4. 注意点
1.使用this.$emit时传递的事件名,必须要与在父组件中使用的事件名一致
2. 在在子组件中不能改变父组件传递来的值,如果要修改,请通过父组件修改,使数据单向流动
相关文章:
如何在vue中实现父子通信
1.需要用到的组件 父组件 <template><div id"app"><BaseCount :count"count" changeCount"cahngeCount"></BaseCount></div> </template><script> import BaseCount from ./components/BaseCount.v…...
PHP实现华为OBS存储
一:华为OBS存储文档地址 官方文档:https://support.huaweicloud.com/obs/index.html github地址:https://github.com/huaweicloud/huaweicloud-sdk-php-obs 二:安装华为OBS拓展 composer require obs/esdk-obs-php 三&#x…...
嵌入式 linux Git常用命令 抽补丁 打补丁
Git常用命令 为什么要学习git呢?我相信刚入门的小伙伴敲打肯定碰到过这种玄学问题,我明明刚刚还能用的代码,后面不知道咋的就不能用了,所以每次你调出一个功能点以后都会手动复制一份代码防止出问题,时间一长发现整个…...
Alan Chhabra:MongoDB AI应用程序计划(MAAP) 为客户提供价值
MongoDB全球合作伙伴执行副总裁 Alan Chhabra 每当有人向我问询MongoDB,我都会说他们很可能在不觉之间已经与MongoDB有过交集。事实上,包括70%财富百强在内的许多世界领先企业公司都在使用MongoDB。我们在MongoDB所做的一切都是为了服务客户,…...
【学习笔记】目前市面中手持激光雷达设备及参数汇总
手持激光雷达设备介绍 手持激光雷达设备是一种利用激光时间飞行原理来测量物体距离并构建三维模型的便携式高科技产品。它通过发射激光束并分析反射回来的激光信号,能够精确地获取物体的三维结构信息。这种设备以其高精度、适应各种光照环境的能力和便携性…...
Burp与小程序梦中情缘
前言 在日常渗透工作中,有时需要对微信小程序进行抓包渗透,通过抓包,我们可以捕获小程序与服务器之间的通信数据,分析这些数据可以帮助我们发现潜在的安全漏洞,本文通过讲述三个方法在PC端来对小程序抓包渗透 文章目…...
数据结构:Win32 API详解
目录 一.Win32 API的介绍 二.控制台程序(Console)与COORD 1..控制台程序(Console): 2.控制台窗口坐标COORD: 3.GetStdHandle函数: (1)语法: (2)参数: 4.GetConsoleCursorInf…...
迁移学习中模型训练加速(以mllm模型为例),提速15%以上
根据模型训练过程的显存占用实测的分析,一个1g参数的模型(存储占用4g)训练大约需要20g的显存,其中梯度值占用的显存约一半。博主本意是想实现在迁移学习(冻结部分参数)中模型显存占用的降低,结果不太满意,只能实现训练速度提升,但无法实现显存占用优化。预计是在现有的…...
socket编程UDP-实现停等机制(接收确认、超时重传)
在下面博客中,我介绍了利用UDP模拟TCP连接、按数据包发送文件的过程,并附上完整源码。 socket编程UDP-文件传输&模拟TCP建立连接脱离连接(进阶篇)_udp socket发送-CSDN博客 下面博客实现的是滑动窗口机制: sock…...
前端面试题目 (Node.JS-Express框架)[二]
在 Express 中如何使用 Passport.js 进行身份认证? Passport.js 是一个 Node.js 的身份验证中间件,它可以很容易地与 Express 集成。下面是一个简单的示例,展示了如何使用 Passport.js 进行基本的身份认证。 安装依赖 npm install express passport …...
防范TCP攻击:策略与实践
TCP(传输控制协议)是互联网通信的核心协议之一,它确保了数据在网络上的可靠传输。然而,TCP也容易成为各种网络攻击的目标,如SYN洪水攻击、TCP连接耗尽攻击等。本文将探讨如何通过配置防火墙规则、优化服务器设置以及采…...
3D 生成重建034-NerfDiff借助扩散模型直接生成nerf
3D 生成重建034-NerfDiff借助扩散模型直接生成nerf 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 感觉这个论文可能能shapE差不多同时期工作,但是shapE是生成任意种类。 本文提出了一种新颖的单图像视图合成方法NerfDiff,该方法利用神经辐射场 …...
分布式 Paxos算法 总结
前言 相关系列 《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》 参考文献 《图解超难理解的 Paxos 算法(含伪代码)》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…...
我的宝贵经验
在技术的浩瀚海洋中,一份优秀的技术文档宛如精准的航海图。它是知识传承的载体,是团队协作的桥梁,更是产品成功的幕后英雄。然而,打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼?是否纠结…...
geoserver 瓦片地图,tomcat和nginx实现负载均衡
在地理信息系统(GIS)领域,GeoServer作为一个强大的开源服务器,能够发布各种地图服务,包括瓦片地图服务。为了提高服务的可用性和扩展性,结合Tomcat和Nginx实现负载均衡成为了一个有效的解决方案。本文将详细…...
Jenkins 启动 程序 退出后 被杀死问题
参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客...
SEGGER | 基于STM32F405 + Keil - RTT组件01 - 移植SEGGER RTT
导言 RTT(Real Time Transfer)是一种用于嵌入式中与用户进行交互的技术,它结合了SWO和半主机的优点,具有极高的性能。 使用RTT可以从MCU非常快速输出调试信息和数据,且不影响MCU实时性。这个功能可以用于很多支持J-Link的设备和MCU࿰…...
分布式开发学习
1、kratos的特点 gRPC:Kratos 默认支持 gRPC,提供高性能的远程调用能力,适用于微服务间通信。 HTTP :同时支持 HTTP/1.1 和 HTTP/2,方便微服务与外部系统交互。 Protocol Buffers: protoc 工具生…...
freeswitch(开启支持MCU视频会议,使用mod_av模块)
亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景说明: 有些场景想使用视频会议MCU融合画面进行开会使用方法: 第一步:下载插件 yum install -y epel-release yum install...
Vue3常见api使用指南(TS版)
defineProps() 和 defineEmits() 内置函数,无需import导入,直接使用。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此,传入的选项不能引用在 setup 范围中声明的局部变量(比如设置默认值时),但是…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析,分为已启动和未启动两种场景: 一、ContentProvider已启动的情况 1. 核心流程 触发条件:当其他组件(如Activity、Service)通过ContentR…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
