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

黑豹程序员-封装组件-Vue3 setup方式子组件传值给父组件

需求

封装组件

需要使用到Vue3中如何定义父子组件,由子组件给父组件传值

核心代码

如何使用emits

组件

<template><button @click="sendData">点击按钮</button>
</template><script setup>
import {ref, defineEmits} from 'vue'
const emits = defineEmits(['childEvent'])//传递给父组件的数据
const data = ref('hello')const sendData = () => {emits('childEvent', data.value )       //触发emits事件
}
</script>

调用

<!-- 父组件 ParentComponent.vue -->
<template><div><!-- 注册子组件的自定义事件,并指定事件处理函数 handleChildEvent --><ChildComponent @childEvent="handleChildEvent"></ChildComponent></div>
</template><script setup>import {ref } from 'vue'import ChildComponent from './c.vue'const receivedData = ref()//data 为子组件调用后返回的数据const handleChildEvent = (data)=>{receivedData.value = data;console.log(data)}</script>

相关文章:

黑豹程序员-封装组件-Vue3 setup方式子组件传值给父组件

需求 封装组件 需要使用到Vue3中如何定义父子组件&#xff0c;由子组件给父组件传值 核心代码 如何使用emits 组件 <template><button click"sendData">点击按钮</button> </template><script setup> import {ref, defineEmits}…...

PySpark(三)RDD持久化、共享变量、Spark内核制度,Spark Shuffle、Spark执行流程

目录 RDD持久化 RDD 的数据是过程数据 RDD 缓存 RDD CheckPoint 共享变量 广播变量 累加器 Spark 内核调度 DAG DAG 的宽窄依赖和阶段划分 内存迭代计算 Spark是怎么做内存计算的? DAG的作用?Stage阶段划分的作用? Spark为什么比MapReduce快&#xff1f; Spa…...

PCIE Order Set

1 Training Sequence Training Sequence是由Order Set(OS) 组成&#xff0c;它们主要是用于bit aligment&#xff0c;symbol aligment&#xff0c;交换物理层的参数。当data_rate 2.5GT or 5GT 它们不会被扰码(scramble)&#xff0c;当date_rate 8GT or higher 根据特殊的规则…...

nginx upstream server主动健康检测模块ngx_http_upstream_check_module 使用和源码分析(下)

目录 7. 实现一个UDP健康检测功能7.1 功能定义7.2 定义一个新的健康检测类型7.3 增加udp特定的健康检测需要的配置指令7.3.1 ngx_http_upstream_check_srv_conf_s结构体的扩展7.3.2 check_udp_send的实现7.3.3 check_udp_expect的实现7.3.4 16进制解码代码的实现7.4 ngx_http_u…...

基于SSM的网络在线考试系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的网络在线考试系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring …...

【Flink状态管理(二)各状态初始化入口】状态初始化流程详解与源码剖析

文章目录 1. 状态初始化总流程梳理2.创建StreamOperatorStateContext3. StateInitializationContext的接口设计。4. 状态初始化举例&#xff1a;UDF状态初始化 在TaskManager中启动Task线程后&#xff0c;会调用StreamTask.invoke()方法触发当前Task中算子的执行&#xff0c;在…...

python+flask人口普查数据的应用研究及实现django

作为一款人口普查数据的应用研究及实现&#xff0c;面向的是大多数学者&#xff0c;软件的界面设计简洁清晰&#xff0c;用户可轻松掌握使用技巧。在调查之后&#xff0c;获得用户以下需求&#xff1a; &#xff08;1&#xff09;用户注册登录后&#xff0c;可进入系统解锁更多…...

C语言:函数

C语言&#xff1a;函数 函数的概念库函数自定义函数实参与形参return语句数组做参数声明与定义externstatic 嵌套调用 函数的概念 在C语言中&#xff0c;存在一个函数的概念&#xff0c;有人也将其翻译为子程序。 在数学中&#xff0c;函数是一个完成特定功能的公式&#xff0…...

jmeter-问题一:关于线程组,线程数,用户数详解

文章目录 jmeter参数介绍1.线程数2.准备时长(Ramp-up)3.循环次数4.same user on each iteratio5.调度器 场景一&#xff1a;当你的线程组中线程数为1,循环为1场景二&#xff1a;当你的线程组中线程数为2&#xff0c;循环为1场景三&#xff1a;当你的线程组中线程数为1&#xff…...

golang 通过 cgo 调用 C++ 库

思路 将 C 库包装成 C 库 -> golang 通过 cgo 调用 C 库 C 相关文件 目录列表 include/ some.h C 库头文件some_wrapper.h < 用于将 C 库包装成 C 库的头文件 lib/ libsome.a C 库 src/ some_wrapper.cpp < 用于将 C 库包装成 C 库的源码文件 源码示例 some.h…...

使用 IDEA 开发一个简单易用的 SDK

目录 一、什么是 SDK 二、为什么要开发 SDK 三、开发 SDK 的详细步骤 四、导入 SDK 进行测试 附&#xff1a;ConfigurationProperties 注解的介绍及使用 一、什么是 SDK 1. 定义&#xff1a;软件开发工具包 Software Development Kit 2. 用于开发特定软件或应用程序的工…...

CSS transition(过渡效果)详解

CSS过渡效果&#xff08;Transition&#xff09;是一种在CSS3中引入的动画效果&#xff0c;它允许开发者在元素状态变化时&#xff08;如鼠标悬停、类更改等&#xff09;平滑地改变CSS属性值&#xff0c;从而创建出平滑的动画效果。过渡效果可以应用于多种CSS属性&#xff0c;如…...

Android13多媒体框架概览

Android13多媒体框架概览 Android 多媒体框架 Android 多媒体框架旨在为 Java 服务提供可靠的接口。它是一个系统&#xff0c;包括多媒体应用程序、框架、OpenCore 引擎、音频/视频/输入的硬件设备&#xff0c;输出设备以及一些核心动态库&#xff0c;比如 libmedia、libmedi…...

一文读懂:MybatisPlus从入门到进阶

快速入门 简介 在项目开发中&#xff0c;Mybatis已经为我们简化了代码编写。 但是我们仍需要编写很多单表CURD语句&#xff0c;MybatisPlus可以进一步简化Mybatis。 MybatisPlus官方文档&#xff1a;https://www.baomidou.com/&#xff0c;感谢苞米豆和黑马程序员。 Mybat…...

C语言--------指针(1)

0.指针&指针变量 32位平台&#xff0c;指针变量是4个字节&#xff08;32bit/84)--------x86 64位平台&#xff0c;指针变量是8个字节&#xff08;64bit/88)--------x64 编号指针地址&#xff1b;我们平常讲的p是指针就是说p是一个指针变量&#xff1b; ************只要…...

Vite 下一代的前端工具链,前端开发与构建工具

一、Vite 简介 官方中文网站&#xff1a;Vite | 下一代的前端工具链 官方定义&#xff1a; Vite&#xff0c;下一代的前端工具链&#xff0c;为开发提供极速响应。 Vue3.4版本&#xff0c;Vue新版本使用Vite构建、开发、调试、编译。 Vite的优势 极速的服务启动 使用原生…...

【SpringBoot】FreeMarker视图渲染

目录 一、FreeMarker 简介 1.1 什么是FreeMarker&#xff1f; 1.2 Freemarker模板组成部分 1.3 为什么要使用FreeMarker 二、Springboot集成FreeMarker 2.1 配置 2.2 数据类型 2.2.1 字符串 2.2.2 数值 2.2.3 布尔值 2.2.4 日期 2.3 常见指令 2.3.2 assign 2.3…...

巴尔加瓦算法图解:算法运用。

树 如果能将用户名插入到数组的正确位置就好了&#xff0c;这样就无需在插入后再排序。为此&#xff0c;有人设计了一种名为二叉查找树(binary search tree)的数据结构。 每个node的children 都不大于两个。对于其中的每个节点&#xff0c;左子节点的值都比它小&#xff0c;…...

Docker的镜像和容器的区别

1 Docker镜像 假设Linux内核是第0层&#xff0c;那么无论怎么运行Docker&#xff0c;它都是运行于内核层之上的。这个Docker镜像&#xff0c;是一个只读的镜像&#xff0c;位于第1层&#xff0c;它不能被修改或不能保存状态。 一个Docker镜像可以构建于另一个Docker镜像之上&…...

忘记 RAG:拥抱Agent设计,让 ChatGPT 更智能更贴近实际

RAG&#xff08;检索增强生成&#xff09;设计模式通常用于开发特定数据领域的基于实际情况的ChatGPT。 然而&#xff0c;重点主要是改进检索工具的效率&#xff0c;如嵌入式搜索、混合搜索和微调嵌入&#xff0c;而不是智能搜索。 这篇文章介绍了一种新的方法&#xff0c;灵感…...

5分钟搞定OpenClaw+nanobot:超轻量级AI助手一键部署指南

5分钟搞定OpenClawnanobot&#xff1a;超轻量级AI助手一键部署指南 1. 为什么选择OpenClawnanobot组合 上周我在整理电脑上的项目文档时&#xff0c;突然意识到自己每天要重复执行大量机械操作&#xff1a;查找文件、转换格式、汇总数据。作为独立开发者&#xff0c;这些琐事…...

viem ABI工具使用教程:编码、解码和类型推断全攻略

viem ABI工具使用教程&#xff1a;编码、解码和类型推断全攻略 【免费下载链接】viem TypeScript Interface for Ethereum 项目地址: https://gitcode.com/gh_mirrors/vi/viem viem是一个轻量级、可组合且类型安全的TypeScript以太坊接口工具库&#xff0c;其强大的ABI工…...

静态图训练卡顿、NCCL超时、Graph Break频发?PyTorch 3.0分布式训练高频故障诊断与热修复清单,含12个可复用调试脚本

第一章&#xff1a;PyTorch 3.0静态图分布式训练故障全景认知PyTorch 3.0 引入的静态图编译&#xff08;TorchDynamo Inductor 后端&#xff09;与原生分布式训练&#xff08;如 FSDP、DDP&#xff09;深度耦合后&#xff0c;故障表现呈现多维交织特征&#xff1a;编译期图构建…...

驯服失控菜单:让右键操作提速60%的实战指南

驯服失控菜单&#xff1a;让右键操作提速60%的实战指南 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 当你在Windows系统中右键点击文件时&#xff0c;是否曾面…...

OpenClaw+GLM-4.7-Flash:自动化代码审查与优化建议

OpenClawGLM-4.7-Flash&#xff1a;自动化代码审查与优化建议 1. 为什么需要自动化代码审查 作为一名长期与代码打交道的开发者&#xff0c;我深知代码审查的重要性&#xff0c;但传统的人工审查存在几个痛点&#xff1a;时间成本高、标准不统一、容易遗漏细节。特别是在个人项…...

基于MATLAB的模拟退火粒子群算法在含分布式电源配电网多目标优化中的应用

310.基于matlab的模拟退火粒子群算法对含分布式电源的配电网进行多目标优化&#xff0c;目标函数包括总有功网损、总投资与运行成本、电压稳定欲度。 和目标函数相关参数有单位分布式电源投资成本、运行成本&#xff0c;分布式电源设备使用年限、贴现率等。 经过优化得到最佳结…...

嵌入式Linux驱动开发核心技术解析

嵌入式Linux驱动工程师面试技术要点解析1. Linux驱动开发核心技术考察1.1 进程同步机制Linux内核提供了多种进程同步机制&#xff0c;包括&#xff1a;信号量&#xff08;Semaphore&#xff09;&#xff1a;用于控制对共享资源的访问互斥锁&#xff08;Mutex&#xff09;&#…...

技术萨满祭典:给数据中心献祭机械硬盘

一、仪式的缘起&#xff1a;当测试工程师遇见数据之灵在数字文明的殿堂中&#xff0c;数据中心是承载万物之灵的圣地。而软件测试从业者&#xff0c;正是穿梭于代码与硬件之间的现代萨满。当机械硬盘&#xff08;HDD&#xff09;在SSD洪流中逐渐退居幕后&#xff0c;这场为老旧…...

Petalinux-build --sdk卡在assimp?手动下载源码并集成到Yocto构建系统的完整指南

解决Petalinux构建SDK时assimp源码下载失败的深度实践指南 当你在Ubuntu 18.04环境下使用Vivado 2021.2进行Petalinux开发时&#xff0c;执行petalinux-build --sdk命令可能会意外卡在assimp组件上。这种问题通常源于网络连接不稳定导致构建系统无法自动下载第三方依赖库。本文…...

ROS2数据录制实战:手把手教你用ros2 bag记录Duckiebot图像数据(附常见错误排查)

ROS2数据录制实战&#xff1a;从Duckiebot仿真到真实场景的全流程指南 在机器人开发过程中&#xff0c;数据记录与分析是算法验证和系统调试的关键环节。ROS2提供的ros2 bag工具链为开发者提供了强大的数据采集能力&#xff0c;但实际应用中往往会遇到各种意料之外的问题。本文…...