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

Vue 3 父子组件通信案例详解：Props 与 Emits 实战

news 来源：原创 2025/6/23 8:21:23

前言

在 Vue 3 开发中，组件通信是最基础也是最重要的技能之一。本文将用实际案例演示 Vue 3 中最常用的两种父子通信方式：Props（父传子）和 Emits（子传父），帮助大家快速掌握 Composition API 下的组件通信技巧。

一、Props 父传子实战

场景描述

我们有一个父组件 ParentComp 需要向子组件 ChildComp 传递用户信息和主题颜色。

代码实现

<!-- 父组件 ParentComp.vue -->
<template><div class="parent"><ChildComp :user="userData" :theme="themeColor"@theme-change="handleThemeChange"/></div>
</template><script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const userData = ref({name: '张三',age: 25,avatar: 'https://example.com/avatar.jpg'
})const themeColor = ref('blue')function handleThemeChange(newColor) {themeColor.value = newColor
}
</script>

<!-- 子组件 ChildComp.vue -->
<template><div :class="`user-card ${theme}`"><img :src="user.avatar" alt="头像"><h3>{{ user.name }}</h3><p>年龄: {{ user.age }}</p><button @click="changeTheme">切换主题</button></div>
</template><script setup>
// 定义 props 接收父组件数据
const props = defineProps({user: {type: Object,required: true},theme: {type: String,default: 'light' // 默认值}
})// 定义 emits
const emit = defineEmits(['theme-change'])function changeTheme() {const newTheme = props.theme === 'blue' ? 'green' : 'blue'emit('theme-change', newTheme) // 触发事件
}
</script><style scoped>
.user-card.blue {border: 2px solid blue;
}
.user-card.green {border: 2px solid green;
}
</style>

关键点解析

defineProps：子组件通过此方法声明接收的 props
- 可以指定类型、必填性和默认值
- 支持复杂对象类型校验
props 使用：通过 props.xxx 访问父组件传递的值
- 模板中可直接使用
- script 中需要通过 props 对象访问

二、Emits 子传父实战

场景描述

子组件需要通知父组件用户点击了"喜欢"按钮，并传递商品ID和喜欢状态。

代码实现

<!-- 父组件 ParentComp.vue -->
<template><div><ProductItem v-for="product in products" :key="product.id":product="product"@like="handleLike"/></div>
</template><script setup>
import { ref } from 'vue'
import ProductItem from './ProductItem.vue'const products = ref([{ id: 1, name: 'Vue 3教程', price: 99 },{ id: 2, name: 'TypeScript手册', price: 88 }
])function handleLike({ id, isLiked }) {const product = products.value.find(p => p.id === id)console.log(`${product.name} ${isLiked ? '已点赞' : '取消点赞'}`)
}
</script>

<!-- 子组件 ProductItem.vue -->
<template><div class="product"><h4>{{ product.name }}</h4><p>价格: {{ product.price }}元</p><button @click="toggleLike">{{ isLiked ? '取消喜欢' : '喜欢' }}</button></div>
</template><script setup>
import { ref } from 'vue'const props = defineProps({product: Object
})// 定义 emits 并添加验证
const emit = defineEmits({like: ({ id, isLiked }) => {if(id && typeof isLiked === 'boolean') {return true}console.warn('无效的 like 事件参数')return false}
})const isLiked = ref(false)function toggleLike() {isLiked.value = !isLiked.valueemit('like', {id: props.product.id,isLiked: isLiked.value})
}
</script>

关键点解析

defineEmits：子组件通过此方法声明要触发的事件
- 可以添加事件参数验证
- 支持 TypeScript 类型定义
emit 触发：通过 emit('事件名', 参数) 通知父组件
- 可以传递任意类型参数
- 推荐使用对象形式传递多个参数

三、常见问题解答

Q1: 为什么我的 props 修改无效？

A: Vue 遵循单向数据流原则，子组件不能直接修改 props。如果需要"修改"，应该通过 emit 事件让父组件修改。

Q2: defineProps 和 defineEmits 需要导入吗？

A: 不需要！它们是 <script setup> 中的编译器宏，会自动编译为正确的选项。

Q3: 如何在 TypeScript 中定义 props 类型？

interface User {name: stringage: number
}const props = defineProps<{user: Usertheme?: string  // 可选属性
}>()

四、最佳实践建议

命名规范：
- props 使用 camelCase 定义，模板中使用 kebab-case
- 自定义事件名使用 kebab-case
复杂数据：
- 对象类型的 props 建议使用接口定义
- 考虑使用 toRefs 解构 props 保持响应性
性能优化：
- 避免在 props 中传递大型对象
- 不变的 props 可以使用 v-once

结语

通过本文的两个实战案例，相信你已经掌握了 Vue 3 中最核心的父子组件通信方式。记住：

父传子用 defineProps
子传父用 defineEmits

在实际开发中，合理运用这些通信方式可以让你的组件更加清晰可维护。如果有任何问题，欢迎在评论区留言讨论！

Vue 3 父子组件通信案例详解：Props 与 Emits 实战

前言在 Vue 3 开发中，组件通信是最基础也是最重要的技能之一。本文将用实际案例演示 Vue 3 中最常用的两种父子通信方式：Props（父传子）和 Emits（子传父），帮助大家快速掌握 Composition API 下…...

编程日记 2025/6/23 8:21:23

kotlin与MVVM结合使用总结（三）

1. MVVM 架构详细介绍及源码层面理解整体架构 MVVM（Model - View - ViewModel）架构是为了解决视图和数据模型之间的耦合问题而设计的。它通过引入 ViewModel 作为中间层，实现了视图和数据的分离，提高了代码的可维护性和可测试性…...

编程日记 2025/6/23 23:46:51

前端基础之《Vue（11）—自定义指令》

一、自定义指令 1、自己封装指令什么是指令？指令本质上就是DOM功能的一种抽象封装。如果有一些DOM功能经常用，但是Vue没有提供相关指令，建议自己封装。 2、自定义全局指令使用Vue.directive(指令名, function() {})定义全局指令。 3、…...

编程日记 2025/6/19 18:03:12

第3.2节 Android应用调用链路分析

3.2.1 Android调用链路简介在Android应用程序中，调用链路涉及应用程序中不同组件（如Activity、Service、BroadcastReceiver、ContentProvider）之间的调用关系，以及应用程序与系统服务之间的交互。了解和分析这些调用链路对于调试…...

编程日记 2025/6/24 0:54:54

Codeforces Round 1019 (Div. 2) ABC

A 模拟思路数组y是不同的，且所以xi * yi 相同，只有x数组全不同才可以满足要求代码 LL n,m,k;void solve() {map<LL,LL> mp;cin >> n;for (int i 1;i < n;i ){LL x;cin >> x;mp[x] ;}cout << mp.size() << endl;…...

编程日记 2025/6/24 0:41:04

Babylon.js 材质统一转换指南：将 AssetContainer 中的所有材质转换为 PBRMetallicRoughnessMaterial

在现代 3D 开发中，基于物理的渲染(PBR)已成为行业标准。本文将详细介绍如何在 Babylon.js 中将 AssetContainer 加载的各种材质统一转换为 PBRMetallicRoughnessMaterial，实现项目材质的标准化。为什么需要材质转换？ PBRMetallicRoughness…...

编程日记 2025/6/2 20:38:19

Linux Platform驱动模型全解析：从入门到精通

Linux Platform驱动模型全解析：从入门到精通 1. Platform驱动模型概述 1.1 什么是Platform驱动模型 Platform驱动模型是Linux内核为处理非热插拔设备（通常是SoC集成外设）而设计的一套驱动框架。它通过虚拟的"platform总线"将硬件…...

编程日记 2025/6/24 1:54:45

7.Excel：单元格格式

一案例 1.案例1 2.案例2 3.案例3 二三种基本数据类型补充：在没有任何格式的情况下是这样对齐的。 1.文本默认左对齐，文本不可参与计算。 2.数值默认右对齐，数值计算精度是15位。若超出15位，超出部分显示为0。 3.逻辑值 …...

编程日记 2025/6/24 1:20:12

文件传输过滤器绕过：Exe2Hex

Exe2hex是****g0tmilk开发的一款工具，您可以**在这里找到它。该工具将 EXE 文件转录为一系列十六进制字符串**，DEBUG.exe或Powershell可以将其还原为原始 EXE 文件。之后，该脚本会在受害者机器上运行，重建并执行 EXE 文件。这在系统管理员阻止EXE 文件传输或上传的****高级…...

编程日记 2025/6/20 22:48:17

从多类缺陷到高良率跃升｜公差分析技术重构动力电池装配精度体系

在新能源汽车产业升级关键期，动力电池装配精度和因装配引起的安全问题已成为制约产能提升的核心瓶颈。某头部电池企业通过 CETOL 6σ 公差分析技术，成功构建了复杂电池系统的精度控制体系。生产实践表明，微观尺度的公差偏差可能引发系统性质量…...

编程日记 2025/6/24 1:37:24

一、效果 ![ 二、弹窗主体部分 noticewidget /* ** File name: NoticeWidget.h ** Author: ** Date: 2025-04-25 ** Brief: 通知栏控件 ** Copyright (C) 1392019713qq.com All rights reserved. */#include "../Include/NoticeWidget.h"…...

编程日记 2025/6/24 0:39:49

【使用层次序列构建二叉树（数据结构C）】

使用层次序列构建二叉树（C语言实现） 在数据结构学习过程中，二叉树的构建方式通常有递归建树（前序/中序）和层次建树（广度优先）两种。本文将介绍一种基于辅助队列实现的层次建树方法，并…...

编程日记 2025/6/24 1:06:59

【基于Qt的QQ音乐播放器开发实战：从0到1打造全功能音乐播放应用】

🌹 作者: 云小逸 🤟 个人主页: 云小逸的主页 🤟 motto: 要敢于一个人默默的面对自己，强大自己才是核心。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前，其次就是现在&…...

编程日记 2025/6/19 23:10:57

蓝桥杯 3. 密码脱落

密码脱落原题目链接题目描述 X 星球的考古学家发现了一批古代留下来的密码。这些密码是由 A、B、C、D 四种植物的种子串成的序列。仔细分析发现，这些密码串当初应该是前后对称的（即镜像串）。由于年代久远，其中许多种子…...

编程日记 2025/5/29 12:36:19

数学基础 -- 欧拉恒等式的魅力：让复数旋转起来！

公式推导： e i π − 1 e^{i\pi} -1 eiπ−1 被誉为数学中最美的公式之一，它连接了五个数学中最重要的常数： e i π 1 0 (欧拉恒等式) e^{i\pi} 1 0 \tag{欧拉恒等式} eiπ10(欧拉恒等式) 这不仅是巧合，而是复数与三角函数…...

编程日记 2025/6/24 1:16:33

keil修改字体无效，修改字体为“微软雅黑”方法

在网上下载了微软雅黑字体，微软雅黑参考下载链接结果在Edit->Configuration中找不到这个字体这个时候可以在keil的安装目录中找到UV4/global.prop文件用记事本打开它进行编辑，把字体名字改成微软雅黑重新打开keil就发现字体成功修改了。这个…...

编程日记 2025/6/24 1:09:49

LeetCode 每日一题 2845. 统计趣味子数组的数目

2845. 统计趣味子数组的数目给你一个下标从 0 开始的整数数组 nums ，以及整数 modulo 和整数 k 。请你找出并统计数组中趣味子数组的数目。如果子数组 nums[l…r] 满足下述条件，则称其为趣味子数组 ： 在范围 [l, r] 内，设 …...

编程日记 2025/6/23 19:33:27

二进制兼容性分析方法

I. 引言在软件工程领域，二进制兼容性（Binary Compatibility）是一个核心概念，它指的是一个计算系统能够运行为另一个系统编译的可执行代码（通常是机器码）的能力，而无需重新编译。这与源代码兼…...

编程日记 2025/6/21 4:44:05

在 WSL 安装 OpenFOAM-12

在 WSL 安装 OpenFOAM-12 参考链接安装教程问题整理1、安装完成后运行测试算例 Alllrun 脚本报错参考链接 OpenFOAM OpenFoam-v12 OpenFOAM-v12-Ubuntu 安装教程直接在 OpenFOAM 官网找到 Down -> OpenFOAM v12 选择 DownLoad v12 | Ubuntu -> Read More 具体安装过…...

编程日记 2025/6/21 8:35:43

Linux-06 ubuntu 系统截图软件使用简单记录

文章目录原委一、Shutter二、Flameshot三、Ksnip 原委原先使用的 Flameshot 截图软件，在ubuntu 18.04下可以正常使用。系统升级到22.04 后，安装后的只能截图，不能标注，想着修复下。以下是个人备忘录记录，如何使用…...

编程日记 2025/6/22 8:49:47

基于python代码的通过爬虫方式实现快手发布视频（2025年4月）

1、将真实的快手创作服务平台的cookie贴到代码目录中kuaishou_cookie.txt文件里，运行python脚本即可； 2、运行之前根据import提示安装一些常见依赖，比如requests等； 3、__NS_sig3.js的源码见快手NS sig3签名算法（2025年1月）_快手sig3算法源码-CSDN博客 4、2025年4月份…...

编程日记 2025/6/21 1:32:37

人工智能与机器学习：Python从零实现逻辑回归模型

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2025/6/1 2:36:15

大模型助力嘉兴妇幼：数据分类分级的智能化飞跃

在医疗行业数字化转型进程中，数据已成为驱动服务升级与业务创新的核心要素。作为医疗行业数字化的探索者，嘉兴市妇幼保健院携手美创打造的智能化数据分类分级项目，数据识别率和分类分级率高达99%，分类分级准确率达90%，…...

编程日记 2025/6/1 6:34:40

MyBatisPlus文档

一、MyBatis框架回顾使用springboot整合Mybatis,实现Mybatis框架的搭建 1、创建示例项目 (1)、创建工程新建工程创建空工程创建模块创建springboot模块选择SpringBoot版本 (2)、引入依赖 <dependencies><dependency><groupId>org.springframework.…...

编程日记 2025/6/21 22:27:55

支持Function Call的本地ollama模型对比评测-》开发代理agent

目标是开发支持多个 Function 定义的智能体代理系统 ✅ 第一部分：是否支持多个函数（multi-function calling） 模型名称支持多个函数注册是否支持函数选择（name 匹配）是否能生成结构化参数OpenChat 3.5 / 3.5-0106✅&a…...

编程日记 2025/6/20 13:27:25

Docker拉取镜像代理配置实践与经验分享

Docker拉取镜像代理配置实践与经验分享一、背景概述在企业内网环境中，我们部署了多台用于测试与学习的服务器。近期，接到领导安排，需在其中一台服务器上通过Docker安装n8n应用程序。然而在实际操作过程中，遭遇Docker官方镜像库…...

编程日记 2025/6/22 8:16:40

Jinja 的详细介绍和学习方法

Jinja 是一种流行的模板引擎（Template Engine），主要用于生成动态的文本内容（如 HTML、XML、配置文件等）。它最初是为 Python 的 Web 框架（如 Flask、Django）设计的，但也可以独立使用…...

编程日记 2025/6/4 1:19:07

在 Windows 系统上升级 Node.js

一、查询电脑端已经安装的 Node.js 版本 1、通过【winR】键，输入 cmd，点击【确定】按钮打开 cmd 窗口 2、命令行界面输入 node -v 查看目前 Node.js 版本 3、命令行界面输入 npm -v 查看目前 npm 版本二、进入官网地址下载安装包 1、官网地址&#x…...

编程日记 2025/5/31 11:57:53

特斯拉宣布启动自动驾驶网约车测试，无人出租车服务进入最后准备阶段

特斯拉公司于4月24日正式宣布，已在美国得克萨斯州奥斯汀和加利福尼亚州旧金山湾区启动自动驾驶网约车服务的员工内部测试。这项测试将为今年夏季计划推出的完全无人驾驶出租车服务进行最后的验证和准备。此次测试使用约200辆经过特殊改装的Model 3车型，…...

编程日记 2025/6/22 9:37:28

C++面试复习（7）2025.4.25

1，说一说常用的 Linux 命令(NIUKE) 1，cat 查看文件内容 cat filename2，rm 删除 rm filename：删除文件。 rm -r directory：删除目录及其内容。 rm -f filename：强制删除文件（不询问确认&…...

编程日记 2025/6/20 1:53:56

使用 uv 工具快速创建 MCP 服务（Trae 配置并调用 MCP 服务）

文章目录下载Traeuv 工具教程参考我的这篇文章创建 uv 项目main.pyTrae 配置 MCP 服务添加 MCP创建智能体使用智能体调用 MCP 创建 demo 表查询 demo 表结构信息demo 表插入 2 条测试数据查询 demo 表中的数据下载Trae https://www.trae.com.cn/ uv 工具教程参考我的这篇…...

编程日记 2025/6/20 1:58:14

07 Python 字符串全解析

文章目录一. 字符串的定义二. 字符串的基本用法1. 访问字符串中的字符2. 字符串切片3. 字符串拼接4. 字符串重复5.字符串比较6.字符串成员运算三. 字符串的常用方法1. len() 函数2. upper() 和 lower() 方法3. strip() 方法4. replace() 方法5. split() 方法四. 字符串的进阶…...

编程日记 2025/6/23 17:32:02

IEEE期刊目录重磅更新！共242本期刊被收录！

🔥 🔥 🔥 🔥 【IEEE期刊目录】 2025年2月，IEEE出版社更新了242本期刊目录，其中： • 完全OA期刊36本：SCI有6本，ESCI有15本； • 混合OA期刊183本&…...

编程日记 2025/6/20 1:54:12

微型计算机原理与接口技术第六版第四章课后习题答案-周荷琴，冯焕清-中国科学技术大学出版社

第六版书籍编排的第3章和第4章，仅这两章习题答案跟第四版的答案是相同的，可以参考第四版的答案原第四版习题答案，蓝奏云： https://wwss.lanzouq.com/iWXOY1kvk3yf 第六版的第四章的习题我没有单独编辑，它是在上面第四…...

编程日记 2025/6/22 17:31:47

反爬策略应对指南：淘宝 API 商品数据采集的 IP 代理与请求伪装技术

一、引言在电商数据驱动决策的时代，淘宝平台海量的商品数据极具价值。然而，淘宝为保障平台安全和用户体验，构建了严密的反爬体系。当采集淘宝 API 商品数据时，若不采取有效措施，频繁的请求极易触发反爬机制&#x…...

编程日记 2025/6/3 21:55:27

前端技术Ajax入门

1.1 AJAX 概念和 axios 使用目标了解 AJAX 概念并掌握 axios 库基本使用讲解 1. 什么是 AJAX？ 使用浏览器的 XMLHttpRequest 对象与服务器通信。在浏览器网页中，通过 AJAX 技术（XHR 对象）发起获取省份列表数据的请求&…...

编程日记 2025/6/23 12:48:00

【沉浸式求职学习day25】【部分网络编程知识分享】【基础概念以及简单代码】

不知道大家一直高强度学习自己是什么样的感觉，反正我现在逐渐变得麻木了，马上又要实习笔试了，每次笔试都要突击，每次突击都意识到自己有太多不会的，主打一个心累，但是又能怎样呢，自己选的路就是…...

编程日记 2025/5/31 21:14:58

聊聊Spring AI Alibaba的YoutubeDocumentReader

序本文主要研究一下Spring AI Alibaba的YoutubeDocumentReader YoutubeDocumentReader community/document-readers/spring-ai-alibaba-starter-document-reader-youtube/src/main/java/com/alibaba/cloud/ai/reader/youtube/YoutubeDocumentReader.java public class You…...

编程日记 2025/5/22 8:29:48

常用第三方库：flutter_boost混合开发

常用第三方库：flutter_boost混合开发前言在移动应用开发中，混合开发是一个非常重要的话题。特别是对于已有原生应用想要引入Flutter的团队来说，如何实现Flutter页面和原生页面的无缝整合就显得尤为关键。本文将深入介绍flutter_boost这个…...

编程日记 2025/5/31 19:13:34

什么是 JSON？学习JSON有什么用？在springboot项目里如何实现JSON的序列化和反序列化？

作为一个学习Javaweb的新手，理解JSON的序列化和反序列化非常重要，因为它在现代Web开发，特别是Spring Boot中无处不在。什么是 JSON？ 首先，我们简单了解一下JSON (JavaScript Object Notation)。 JSON 是一种轻量级的…...

编程日记 2025/6/23 15:51:23

[mysql]数据类型精讲

目录数据类型精讲: 整数类型浮点类型日期和时间类型文本字符串类型数据类型精讲: 精度问题:不能损失数据性能问题:表的设计,范式的讲解. 表设计的时候需要设置字段,我们现在要把字段类型讲完.,细节点一点点给大家拆解. Float和double是有精度的损失的,这边推荐使用…...

编程日记 2025/6/22 16:00:52

WordPress AI插件能自动写高质量文章吗，如何用AI提升网站流量

WordPress AI插件能自动写高质量文章吗？ 最近很多站长都在问，用wordpress AI插件真的能写出搜索引擎喜欢的好文章吗？作为一个用过10款AI写作工具的老站长，今天我就来分享真实使用体验，告诉你哪些插件好用、怎么用才能…...

编程日记 2025/6/23 20:53:39

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题) 目录【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)一、历年真题二、考点：函数调用 —— 传值调用和传地址调用🔺1、传值调用🔺2、传引用(地址)调…...

编程日记 2025/6/1 18:28:36

ECMAScript 1（ES1）:JavaScript 的开端

1. 版本背景与发布 ●发布时间：1997 年 6 月，由 ECMA International 正式发布，标准编号为 ECMA-262。 ●历史意义：ES1 是 JavaScript 的首个标准化版本，结束了 Netscape Navigator 与 Internet Explorer 浏览器间脚本语…...

编程日记 2025/6/20 10:23:28

C++入侵检测与网络攻防之暴力破解

目录 1.nessus扫描任务 2.漏洞信息共享平台 3.nessus扫描结果 4.漏扫报告的查看 5.暴力破解以及hydra的使用 6.crunch命令生成字典 7.其他方式获取字典 8.复习 9.关于暴力破解的防御的讨论 10.pam配置的讲解 11.pam弱密码保护 12.pam锁定账户 13.shadow文件的解析 …...

编程日记 2025/5/31 20:06:43