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

vue3父子组件通信

一,父传子——defineProps

方法:
在父组件的模板中使用子组件标签,并且给标签自定义属性和属性名,即通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。

父组件:

<template><div ><div>我是父组件</div><<SonCom :fatherProp="msg" ></SonCom> -</div>
</template>
<script setup lang='ts'>import SonCom from '@/components/SonCom.vue';  // 引入子组件import { ref } from 'vue';const msg = ref<string>('coderkey')
</script>

子组件:

<template><div ><div>我是子组件</div></div>
</template>
<script setup lang='ts'>import { defineProps } from 'vue';let prop = defineProps({fatherProp: {required: true,type: String,default: 'pink',}}) console.log(prop.fatherProp)  // coderkey
</script>

二,子传父——defineEmits

方法:

defineEmits['自定义事件名']

子组件中通过emit调用父组件中的自定义事件,给父组件的这个方法里传入数据数据。

父组件:

<template><div ><div>我是父组件</div><<SonCom :fatherProp="msg" @update:fatherProp="fatherClick"></SonCom> -</div>
</template>
<script setup lang='ts'>import SonCom from '@/components/SonCom.vue';  // 引入子组件import { ref } from 'vue';const msg= ref<string>('coderkey')const fatherClick = (data:any) => {console.log(data);  // 子组件传递数据给父组件
}
</script>

子组件:

<template><div ><div>我是子组件</div><button  @click="sendDateHandle">子传父数据</button></div>
</template>
<script setup lang='ts'>import { defineProps,defineEmits } from 'vue';let prop = defineProps({fatherProp: {required: true,type: String,default: 'pink',}}) console.log(prop.msg)  // coderkeylet emit = defineEmits(['update:fatherProp'])const sendDateHandle = () => {emit('update:fatherProp','子组件传递数据给父组件')}
</script>

相关文章:

vue3父子组件通信

一&#xff0c;父传子——defineProps 方法&#xff1a; 在父组件的模板中使用子组件标签&#xff0c;并且给标签自定义属性和属性名&#xff0c;即通过v-bind绑定数值&#xff0c;而后传给子组件&#xff1b;子组件则通过defineProps接收使用。 父组件&#xff1a; <tem…...

CSS中使用应用在伪元素中的计数器属性counter-increment

在CSS中&#xff0c;counter-increment 是一个用于递增计数器值的属性。它通常与 counter-reset 和 content 属性一起使用&#xff0c;以在文档中的特定位置&#xff08;如列表项、标题等&#xff09;插入自动生成的数字或符号。 counter-increment 基本用法&#xff1a; 使…...

【SkiaSharp绘图08】SKPaint方法:自动换行、是否乱码、字符偏移、边界、截距、文本轮廓、测量文本

文章目录 SKPaint方法BreakText 计算指定宽度内可绘制的字符个数ContainsGlyphs字体是否包含文本字符(是否会乱码)GetGlyphOffsets 字符偏移量GetGlyphPositions 偏移坐标GetGlyphWidths 每个字符的宽度与边界GetHorizontalTextIntercepts 轮廓截距GetPositionedTextIntercepts…...

深入理解Servlet Filter及其限流实践

引言 在Java Servlet技术中&#xff0c;Filter是一个拦截器&#xff0c;它允许开发者在请求到达目标资源之前或响应发送给客户端之后&#xff0c;对请求或响应进行拦截和处理。这种机制为实现诸如身份验证、日志记录、请求修改等功能提供了极大的灵活性。 Filter基础 Filter…...

使用cv2对视频指定区域进行去噪

视频去噪其实和图象一样&#xff0c;只是需要现将视频截成图片&#xff0c;在对图片进行去噪&#xff0c;将去噪的图片在合成视频就行。可以利用cv2.imread()、imwrite()等轻松实现。 去噪步骤 1、视频逐帧读成图片 2、图片指定区域批量去噪 2、去噪后的图片写入视频 1、视频逐…...

AI在创造还是毁掉音乐?

AI对音乐产业的影响是复杂而多维的&#xff0c;既有创造性的贡献也存在潜在的挑战。我们可以从以下几个角度来分析这个问题&#xff1a; ### 创造性贡献 1. **音乐创作**&#xff1a;AI可以帮助音乐家创作新的旋律和和声&#xff0c;甚至生成完整的音乐作品。例如&#xff0c…...

【2023年全国青少年信息素养大赛智能算法挑战赛复赛真题卷】

目录 2023全国青少年信息素养大赛智能算法挑战赛初中组复赛真题 2023全国⻘少年信息素养⼤赛智能算法挑战复赛⼩学组真题 2023全国青少年信息素养大赛智能算法挑战赛初中组复赛真题 1. 修复机器人的对话词库错误 【题目描述】 基于人工智能技术的智能陪伴机器人的语言词库被…...

Android系统揭秘(一)-Activity启动流程(上)

public ActivityResult execStartActivity( Context who, IBinder contextThread, IBinder token, Activity target, Intent intent, int requestCode, Bundle options) { IApplicationThread whoThread (IApplicationThread) contextThread; … try { … int result …...

使用Java实现哈夫曼编码

前言 哈夫曼编码是一种经典的无损数据压缩算法&#xff0c;它通过赋予出现频率较高的字符较短的编码&#xff0c;出现频率较低的字符较长的编码&#xff0c;从而实现压缩效果。这篇博客将详细讲解如何使用Java实现哈夫曼编码&#xff0c;包括哈夫曼编码的原理、具体实现步骤以…...

IDEA、PyCharm等基于IntelliJ平台的IDE汉化方式

PyCharm 或者 IDEA 等编辑器是比较常用的&#xff0c;默认是英文界面&#xff0c;有些同学用着不方便&#xff0c;想要汉化版本的&#xff0c;但官方没有这个设置项&#xff0c;不过可以通过插件的方式进行设置。 方式1&#xff1a;插件安装 1、打开设置 File->Settings&a…...

visual studio 创建c++项目

目录 环境准备&#xff1a;安装 visual studiovisual studio 创建c项目Tips&#xff1a;新建cpp文件注释与取消注释代码 其他初学者使用Visual Studio开发C和C时常遇到的3个坑 环境准备&#xff1a;安装 visual studio 官网&#xff1a;https://visualstudio.microsoft.com/zh…...

MGV电源维修KUKA机器人电源模块PH2003-4840

MGV电源维修 库卡电源模块维修 机器人电源模块维修 库卡控制器维修 KUKA电源维修 库卡机器人KUKA主机维修 KUKA驱动器模块维修 机械行业维修&#xff1a;西门子系统、法那克系统、沙迪克、FIDIA、天田、阿玛达、友嘉、大宇系统&#xff1b;数控冲床、剪板机、折弯机等品牌数控…...

设置浏览器互不干扰

目录 一、查看浏览器文件路径 二、 其他盘新建文件夹Cache 三、以管理员运行CMD 四、执行命令 一、查看浏览器文件路径 chrome://version/ 二、 其他盘新建文件夹Cache D:\chrome\Cache 三、以管理员运行CMD 四、执行命令 Mklink /d "C:\Users\Lenovo\AppData\Loca…...

kafka操作命令详解

目录 1、集群运维命令 1.1、集群启停命令 1.3、集群迁移命令 1.4、权限管理命令 1.4.1、权限参数介绍 1.4.2、增加权限命令 1.4.3、移出权限命令 1.4.4、查看所有topic权限命令 1.4.5、查看某个topic权限命令 2、生产者命令 2.1、创建topic命令 2.2、删除topic命令 …...

graalvm jdk和openjdk

下载地址:https://github.com/graalvm/graalvm-ce-builds/releases 官网: https://www.graalvm.org...

docker基础使用教程

1.准备工作 例子&#xff1a;工程在docker_test 生成requirements.txt文件命令&#xff1a;&#xff08;使用参考链接2&#xff09; pip list --formatfreeze > requirements.txt 参考链接1&#xff1a; 安装pipreqs可能比较困难 python 项目自动生成环境配置文件require…...

计算机网络 交换机的安全配置

一、理论知识 1.交换机端口安全功能介绍 交换机端口安全功能是针对交换机端口进行安全属性的配置&#xff0c;以控制用户的安全接入。主要包括以下两种配置项&#xff1a; ①限制交换机端口的最大连接数&#xff1a;控制交换机端口连接的主机数量&#xff1b;防止用户进行恶…...

深入解析大语言模型系列:Transformer架构的原理与应用

引言 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;近几年取得了突破性的进展&#xff0c;而 Transformer 作为这些模型的核心架构&#xff0c;功不可没。本文将详细介绍 Transformer 的原理、结…...

uni-app地图组件控制

uni.createMapContext(mapId,this) 创建并返回 map 上下文 mapContext 对象。在自定义组件下&#xff0c;第二个参数传入组件实例this&#xff0c;以操作组件内 <map> 组件。 注意&#xff1a;uni.createMapContext(mapId, this) app-nvue 平台 2.2.5 支持 uni.create…...

前端调用api发请求常用的请求头content- type的类型和常用场景

Content-Type 是一个非常重要的HTTP头&#xff0c;它定义了发送给服务器或客户端的数据的MIME类型。这对于服务器和客户端正确解析和处理数据至关重要。下面是一些常见的 Content-Type 值及其用途和区别。 常见的 Content-Type 值 text/plain • 用途: 纯文本&#xff0c;无格…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...