当前位置: 首页 > news >正文

Vue3通过$emit实现子向父传递数据

引言

        子组件通过$emit触发事件,并传递数据,父组件在使用子组件时就可以绑定子组件事件,在事件处理函数中拿到子组件传来的数据

子组件传递数据

函数声明:$emit('事件名', 传递的数据 . . .)

                子组件传递的数据会依次传递给父组件的事件函数

使用:

① 在html标签中使用

直接执行$emit()函数即可

<!--    子组件名为search -->
<template><view class="root"><input type="text"><view class="search" @click="$emit('search', 100)">搜索</view></view>
</template>

② 在 js 代码中使用

  1. 通过defineEmits()函数定义事件

  2. 拿到返回对象触发事件

<!--    子组件名为search -->
<template><view><view class="root"><input type="text"><view class="search" @click="search">搜索</view></view></view>
</template>
​
<script setup>import {defineEmits} from 'vue';//  定义事件const emit = defineEmits(['search'])//  触发事件的函数const search = () => {//  触发该组件的search事件emit('search', 100)}
</script>

父组件接收数据

绑定子组件定义的事件,通过事件处理函数的参数获取传来的数据

<template><view class="root"><!-- 绑定事件函数 --><search @search="getSearchData"></search></view>
</template>
​
<script setup>const getSearchData = (data) => {//  拿到子组件传递来的数据console.log(data)}
</script>

相关文章:

Vue3通过$emit实现子向父传递数据

引言 子组件通过$emit触发事件&#xff0c;并传递数据&#xff0c;父组件在使用子组件时就可以绑定子组件事件&#xff0c;在事件处理函数中拿到子组件传来的数据 子组件传递数据 函数声明&#xff1a;$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的…...

代码随想录算法训练营第十四天|递归 226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度

226.翻转二叉树 翻转一棵二叉树。 思路&#xff1a; 在这里需要注意的是&#xff0c;在递归的时候唯独中序遍历是不可用的&#xff0c;这是因为先对左子树进行了反转&#xff0c;又对自身进行了反转&#xff0c;对自身反转后原本的左子树变成了右子树&#xff0c;如果此时又轮…...

Spark 任务与 Spark Streaming 任务的差异详解

Spark 任务与 Spark Streaming 任务的主要差异源自于两者的应用场景不同&#xff1a;Spark 主要处理静态的大数据集&#xff0c;而 Spark Streaming 处理的是实时流数据。这些差异体现在任务的调度、执行、容错、数据处理模式等方面。 接下来&#xff0c;我们将从底层原理和源…...

Git提示信息 Pulling is not possible because you have unmerged files.

git [fatal] hint: Pulling is not possible because you have unmerged files.hint: Fix them up in the … error: Pulling is not possible because you have unmerged files. 错误:无法提取&#xff0c;因为您有未合并的文件。 hint: Fix them up in the work tree, and t…...

python编程开发“人机猜拳”游戏

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

丹摩智算平台部署 Llama 3.1:实践与体验

文章目录 前言部署前的准备创建实例 部署与配置 Llama 3.1使用心得总结 前言 在最近的开发工作中&#xff0c;我有机会体验了丹摩智算平台&#xff0c;部署并使用了 Llama 3.1 模型。在人工智能和大模型领域&#xff0c;Meta 推出的 Llama 3.1 已经成为了目前最受瞩目的开源模…...

SpringCloud 2023各依赖版本选择、核心功能与组件、创建项目(注意事项、依赖)

目录 1. 各依赖版本选择2. 核心功能与组件3. 创建项目3.1 注意事项3.2 依赖 1. 各依赖版本选择 SpringCloud: 2023.0.1SpringBoot: 3.2.4。参考Spring Cloud Train Reference Documentation选择版本 SpringCloud Alibaba: 2023.0.1.0*: 参考Spring Cloud Alibaba选择版本。同时…...

串行化执行、并行化执行

文章目录 1、串行化执行2、并行化测试&#xff08;多线程环境&#xff09;3、任务的执行是异步的&#xff0c;但主程序的继续执行是同步的 可以将多个任务编排为并行和串行化执行。 也可以处理编排的多个任务的异常&#xff0c;也可以返回兜底数据。 1、串行化执行 顺序执行、…...

二叉搜索树(c++版)

前言 在前面我们介绍过二叉树这个数据结构&#xff0c;今天我们更进一步来介绍二叉树的一种在实现中运用的场景——二叉搜索树。二叉搜索树顾名思义其在“搜索”这个场景下有不俗的表现&#xff0c;之所以会这样是因为它在二叉树的基础上添加了一些属性。下面我们就来简单的介…...

每日1题-7

...

简单实现log记录保存到文本和数据库

简单保存记录到txt&#xff0c;sqlite数据库&#xff0c;以及console监控记录 using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Data.SQLite; using System.IO;namespace NlogFrame {public enum LogType{Tr…...

敏感字段加密 - 华为OD统一考试(E卷)

2024华为OD机试(E卷+D卷+C卷)最新题库【超值优惠】Java/Python/C++合集 题目描述 【敏感字段加密】给定一个由多个命令字组成的命令字符串: 1、字符串长度小于等于127字节,只包含大小写字母,数字,下划线和偶数个双引号; 2、命令字之间以一个或多个下划线 进行分割; 3、可…...

go 安装三方库

go版本 go versiongo version go1.23.1 darwin/arm64安装 redis 库 cd $GOPATH说明&#xff1a; 这里可以改 GOPATH的值 将如下 export 语句写入 ~/.bash_profile 文件中 export GOPATH/Users/goproject然后使其生效 source ~/.bash_profile初始化生成 go.mod 文件 go mod…...

Java 中的 volatile和synchronized和 ReentrantLock区别讲解和案例示范

在 Java 的并发编程中&#xff0c;volatile、synchronized 和 ReentrantLock 是三种常用的同步机制。每种机制都有其独特的特性、优缺点和适用场景。理解它们之间的区别以及在何种情况下使用哪种机制&#xff0c;对提高程序的性能和可靠性至关重要。本文将详细探讨这三种机制的…...

从GDAL中 读取遥感影像的信息

从GDAL提供的实用程序来看&#xff0c;很多程序的后缀都是 .py &#xff0c;这充分地说明了Python语言在GDAL的开发中得到了广泛的应用。 1. 打开已有的GeoTIF文件 下面我们试着读取一个GeoTiff文件的信息。第一步就是打开一个数据集。 >>> from osgeo import gdal…...

算法闭关修炼百题计划(一)

多看优秀的代码一定没有错&#xff0c;此篇博客属于个人学习记录 1.两数之和2.前k个高频元素3.只出现一次的数字4.数组的度5.最佳观光组合6.整数反转7.缺失的第一个正数8.字符串中最多数目的子序列9.k个一组翻转链表10.反转链表II11. 公司命名12.合并区间13.快速排序14.数字中的…...

vue3实现打字机的效果,可以换行

之前看了很多文章,效果是实现了,就是没有自动换行的效果,参考了文章写了一个,先上个效果图,卡顿是因为模仿了卡顿的效果,还是很丝滑的 目录 效果图:代码如下 效果图: ![请添加图片描述](https://i-blog.csdnimg.cn/direct/d8ef33d83dd3441a87d6d033d9e7cafa.gif 代码如下 原…...

【如何学习操作系统】——学会学习的艺术

&#x1f41f;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢编程&#x1fab4; &#x1f421;&#x1f419;个人主页&#x1f947;&#xff1a;Aic山鱼 &#x1f420;WeChat&#xff1a;z7010cyy &#x1f988;系列专栏&#xff1a;&#x1f3de;️ 前端-JS基础专栏✨前…...

stm32 flash无法擦除

通过bushound调试代码发现&#xff0c;当上位机发送命令到模组后flash将不能擦除&#xff0c;通过 HAL_FLASH_GetError&#xff08;&#xff09;函数查找原因是FLASH Programming Sequence error&#xff08;编程顺序错误&#xff09;&#xff0c;解决办法是在解锁后清零标志位…...

Android—ANR日志分析

获取ANR日志&#xff1a; ANR路径&#xff1a;/data/anrADB指令&#xff1a;adb bugreport D:\bugrep.zip ANR日志分析步骤&#xff1a; “main” prio&#xff1a;主线程状态beginning of crash&#xff1a;搜索 crash 相关信息CPU usage from&#xff1a;搜索 cpu 使用信息…...

Java开发者收藏 | 你的经验不是负担,而是转型AI应用开发的加速器!

本文为Java开发者提供了清晰的AI应用开发转型路径。强调Java后端经验在AI领域是宝贵财富而非负担&#xff0c;并介绍了拥抱AI的优势。文章提出了分阶段学习路线&#xff0c;涵盖基础概念、框架选型&#xff08;Spring AI、LangChain4j、Spring AI Alibaba&#xff09;、可视化工…...

独立语音AI创业必读,ElevenLabs Independent计划全链路解析:从白名单内测→额度扩容→月度用量审计→续期失败预警

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs Independent计划的战略定位与生态价值 ElevenLabs Independent 计划并非单纯的技术授权项目&#xff0c;而是面向独立开发者、开源创作者与小型 AI 应用团队构建的可持续协作基础设施。其核…...

技术决策的后悔药:选型错误后的补救策略

在软件测试的全生命周期中&#xff0c;技术选型是影响测试效率、质量与项目成败的关键环节。小到一款测试工具的挑选&#xff0c;大到整个测试框架的搭建&#xff0c;每一次决策都如同在迷雾中航行&#xff0c;稍有不慎便可能驶入“选型错误”的漩涡。当测试环境兼容性问题频发…...

为什么83%的Enterprise客户在第6个月触发License超额预警?揭秘后台用量监控盲区与动态配额优化公式

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;License超额预警现象的全局观测与根本归因 License超额预警并非孤立事件&#xff0c;而是软件许可治理体系中多维耦合失衡的外在表征。在企业级 DevOps 平台&#xff08;如 GitLab Ultimate、JetBrains…...

你的密码正在裸奔!一张RTX 5090,1小时破解60%的MD5密码

网络安全文章 文章目录 网络安全文章前言一、卡巴斯基到底做了什么&#xff1f;1.1 测试环境1.2 测试结果 二、为什么MD5这么脆弱&#xff1f;2.1 MD5设计初衷就不是用来存密码的2.2 MD5 vs bcrypt vs Argon2 对比 三、真实案例&#xff1a;算力平台租卡破解有多便宜&#xff1…...

Flutter 自定义动画完全指南

Flutter 自定义动画完全指南 引言 动画是现代移动应用的重要组成部分&#xff0c;它能够提升用户体验&#xff0c;使界面更加生动。Flutter 提供了强大的动画系统&#xff0c;本文将深入探讨如何创建自定义动画效果。 动画基础回顾 动画类型 补间动画 (Tween Animation) - 最常…...

从F103到F407:老STM32玩家升级指南,详解性能差异与项目移植实战

从F103到F407&#xff1a;老STM32玩家升级指南&#xff0c;详解性能差异与项目移植实战 对于熟悉STM32F1系列开发的工程师来说&#xff0c;升级到F407系列既是一次性能跃迁的机会&#xff0c;也伴随着学习曲线和移植挑战。本文将深入剖析两款芯片的差异&#xff0c;并提供可落地…...

eFuse 的核心作用

它触及了设备安全性的核心机制——eFuse。 简而言之:一台已经烧录(blown)了 eFuse 的设备,其安全机制与未烧录 eFuse 的设备有本质区别,你之前在非 eFuse 设备上成功的代码修改(强制 check_key 返回 0)很可能在烧录了 eFuse 的设备上无效。 以下是详细解释: eFuse 的…...

保姆级教程:用易语言和大漠插件给游戏做字库,实现自动化文字识别(附模块源码)

零基础实战&#xff1a;易语言与大漠插件游戏字库制作全指南 游戏自动化开发中&#xff0c;文字识别是绕不开的核心技术。想象一下&#xff0c;当你的程序能自动读取任务提示、NPC对话或物品名称时&#xff0c;整个自动化流程就拥有了"眼睛"。本文将彻底拆解大漠插件…...

League-Toolkit:基于LCU API的英雄联盟客户端自动化工具深度解析

League-Toolkit&#xff1a;基于LCU API的英雄联盟客户端自动化工具深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是…...