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

Vue3之组件间传值避坑指南

news 2025/12/20 23:53:21

组件间传值的两个坑

我们都知道父组件可以把值传递到自组件中，但是有时候子组件需要修改这个父组件传递过来的这个值，我们可以想象下能修改成功吗？这是坑之一。我们在组件间传值的时候，都是一个属性名对应一个值，接收的时候也是用这个属性名接收，那么每一个用户自定义的属性名都能被接收到吗？这是坑之二，本文就让我们一起来看下这两个坑吧。

实例填坑

坑一

1. 发现天坑

我们通过一个计数器组件来演示这个坑，当想对父组件传递过来的值做操作时，发现操作无效，先看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件间传值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {num:0}},template: `<div><counter :count = "num"/></div>` });// 定义一个test组件app.component('counter',{props: ['count'],template: `<div @click="count+=1">{{count}}</div>`});const vm = app.mount('#root');
</script>
</html>

在上面的代码中，我们定义了一个counter组件接收父组件的一个count值，当点击这个显示的值时，我们做加一操作。这时候我们运行代码会发现，我们的值并不会完成加一操作，而是会报父组件传递过来的值是只读的：

在这里插入图片描述

2. 填坑时刻

那假如我们要完成这个加一的功能怎么办呢？答案就是我们复制一份父组件传递过来的值，对我们自己的值进行操作：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件间传值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {num:0}},template: `<div><counter :count = "num"/></div>` });// 定义一个test组件app.component('counter',{props: ['count'],data(){return{mCount:this.count}},template: `<div @click="mCount+=1">{{mCount}}</div>`});const vm = app.mount('#root');
</script>
</html>

这时候我们再运行代码就会发现我们可以做加一操作了：
在这里插入图片描述

坑2:

1.发现天坑

当我们定义一个单词名称比较长的属性，并且用“-”分隔符连接的时候，子组件无法接收到正确的值，显示NaN。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件间传值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {content:"hello world"}},template: `<div><test :content-helloworld = "content"/></div>` });// 定义一个test组件app.component('test',{props: ['content-helloworld'],template: `<div>{{content-helloworld}}</div>`});const vm = app.mount('#root');
</script>
</html>

在上面的代码中，我们使用content-helloworld这个属性在父组件和子组件之间传值，按照我们的理解，应该是能传递成功的，但是显示的结果却不正确

在这里插入图片描述上面到坑也是VUE中的单向数据流的概念，即子组件可以使用父组件传递过来的数据，但是不能修改父组件传递过来的数据

2.填坑时刻

当我们定义的属性值中有用“-”分隔符分隔时，我们在接收值的时候，需要将属性名改成驼峰命名的方式，如上面的例子中父组件使用content-helloworld传递值到子组件，那么子组件接收到时候应该将其改成驼峰命名方式：使用contentHelloworld接收

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>组件间传值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {content:"hello world"}},template: `<div><test :content-helloworld = "content"/></div>` });// 定义一个test组件app.component('test',{props: ['contentHelloworld'],template: `<div>{{contentHelloworld}}</div>`});const vm = app.mount('#root');
</script>
</html>

这样值就能正确显示了
在这里插入图片描述

总结

本文主要是讲解了组件传值过程中的两个容易犯的小错误，一是父组件传递过来的值不能修改，二是父组件使用“-”分隔符定义属性传递值到子组件，子组件接收时需要将属性名改为驼峰命名方式

相关文章：

Vue3之组件间传值避坑指南

组件间传值的两个坑 我们都知道父组件可以把值传递到自组件中&#xff0c;但是有时候子组件需要修改这个父组件传递过来的这个值&#xff0c;我们可以想象下能修改成功吗&#xff1f;这是坑之一。我们在组件间传值的时候&#xff0c;都是一个属性名对应一个值&#xff0c;接收…...

编程日记 2023/5/19 17:42:15

02-问题思考维度：抓住核心用户、场景化分析、需求收集与辨别、用户故事

文章目录2.1 抓住核心用户2.1.1 为什么要抓住核心用户2.1.2 核心用户的特征根据不同维度&#xff0c;描述核心用户2.1.3 如何抓住核心用户2.2 场景化分析2.2.1 场景五要素2.2.2 场景化分析方法2.2.3 场景化分析方法的应用2.3 需求收集与辨别2.3.1 需求的定义及层次2.3.2 需求收…...

编程日记 2023/5/19 17:42:13

C 语言编程 — GCC Attribute 语法扩展

目录 文章目录目录Attribute 属性扩展机制__attribute__((packed))__attribute__((aligned(n)))__attribute__((noreturn))__attribute__((unused))Attribute 属性扩展机制 GCC 的特点之一就是 Attribute 语法扩展机制&#xff0c;通过使用 __attribute__ 关键字可以设置以下对…...

编程日记 2023/5/19 17:42:11

LeetCode 热题 C++ 399. 除法求值 406. 根据身高重建队列

LeetCode 399 给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件&#xff0c;其中 equations[i] [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi values[i] 。每个 Ai 或 Bi 是一个表示单个变量的字符串。 另有一些以数组 queries 表示的问题&#xff0c;其…...

编程日记 2023/5/19 17:42:08

提升Mac使用性能的5大方法，CleanMyMacX 2023非常的好用哦~

近些年伴随着苹果生态的蓬勃发展&#xff0c;越来越多的用户开始尝试接触Mac电脑。然而很多人上手Mac后会发现&#xff0c;它的使用逻辑与Windows存在很多不同&#xff0c;而且随着使用时间的增加&#xff0c;一些奇奇怪怪的文件也会占据有限的磁盘空间&#xff0c;进而影响使用…...

编程日记 2023/5/19 17:42:06

一步一步学会给Fritzing添加元器件-丰富你的器件库

文章目录1、获取元器件文件2、单个添加元器件3、批量加入&#xff08;1&#xff09;、通过别人发布的bin文件加载&#xff08;2&#xff09;、终极大招&#xff08;拖&#xff09;4、制作自己器件文章出处&#xff1a; https://blog.csdn.net/haigear/article/details/12931545…...

编程日记 2023/5/19 9:54:10

STM32 10个工程篇：1.IAP远程升级（一）

清晨一大早起来开始撰写STM32 10个例程篇的第一章即串口IAP远程升级&#xff0c;虽然网络上有很多免费和付费的STM32教程&#xff0c;但是仍然不断地说服自己沉住气、静下心写一份独一无二的&#xff0c;这份独一无二中也凝聚了一名MCU工程师5年间不断地项目迭代积累&#xff0…...

编程日记 2023/5/19 9:46:55

高通Android 13默认切换免提功能

1、测试部反馈 由于平板本身没有听筒功能 因此考虑工厂直接切换到免提功能 2、修改路径 frameworks/av/services/audiopolicy/enginedefault/src/Engine.cpp 3、编译源码ok 拨打紧急号码 可以正常切换到免提功能 其他mtk平台可能不一样 具体以项目实际为准 相关链接 构建…...

编程日记 2023/5/19 17:42:03

MySQL入门

Mysql入门SQL语句SQL通用语法SQL语句的分类DDL-数据库操作DDL-数据表操作DML-添加数据DML-修改、删除数据DQL-语法DQL-语句练习DCL-语法SQL语句 SQL通用语法 1、SQL语句可以单行或多行书写&#xff0c;以分号结尾。 2、SQL语句可以使用空格/缩进来增强语句的可读性。 3、MySQ…...

编程日记 2023/5/19 17:42:00

实验一 Python编程基础

目录 一、实验目标 二、实验内容 1.绘制如下图形 &#xff0c;一个正方形&#xff0c;内有三个红点&#xff0c;中间红点在正方形中心。 2.使用turtle库绘制如下图形&#xff1a; 3.绘制奥运五环图 4.回文问题 5.身份证性别判别 6.数据压缩 7.验证哥德巴赫猜想 8.使…...

编程日记 2023/5/19 17:41:57

java多线程（十五）ThreadLocal介绍和理解

一、对ThreadLocal的理解 ThreadLocal&#xff0c;很多地方叫做线程本地变量&#xff0c;也有些地方叫做线程本地存储&#xff0c;其实意思差不多。可能很多朋友都知道ThreadLocal为变量在每个线程中都创建了一个副本&#xff0c;那么每个线程可以访问自己内部的副本变量。这句…...

编程日记 2023/5/19 17:41:53

K8S 实用工具之三 - 图形化 UI Lens

开篇 &#x1f4dc; 引言&#xff1a; 磨刀不误砍柴工工欲善其事必先利其器 第一篇&#xff1a;《K8S 实用工具之一 - 如何合并多个 kubeconfig&#xff1f;》第二篇&#xff1a;《K8S 实用工具之二 - 终端 UI K9S》 像我这种&#xff0c;kubectl 用的不是非常溜&#xff0c;经…...

编程日记 2023/5/19 17:41:50

HDMI协议介绍（六）--EDID

目录 什么是EDID EDID结构 1)Header Information 头信息(厂商信息、EDID 版本等) (2)Basic Display Parameters and Features 基本显示参数(数字/模拟接口、屏幕尺寸、格式支持等) (3)色度信息 (4)Established Timings(VESA 定义的电脑使用 Timings) (5)Standard Timing…...

编程日记 2023/5/17 0:52:35

【项目实战】Linux下安装Nginx教程

一、环境准备 Linux版本&#xff1a;CentOS7 64位 二、具体步骤 2.1 步骤1&#xff1a;确认系统中安装以下基础依赖 确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel。 在安装Nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel。 yu…...

编程日记 2023/5/16 22:39:49

【数据结构】链式二叉树

前言 在前面我们学习了一些二叉树的基本知识&#xff0c;了解了它的结构以及一些性质&#xff0c;我们还用数组来模拟二叉树建立了堆&#xff0c;并学习了堆排序&#xff0c;可是数组结构的二叉树有很大的局限性&#xff0c;平常我们用的最多树结构的还是链式二叉树&#xff0c…...

编程日记 2023/5/19 17:41:48

CentOS安装RStudio-Server的方法

R语言是生信分析、数据挖掘最常用最好用的软件之一&#xff0c;得到了广大生信工程师、数据分析师的厚爱。Rstudio 是 R 的集成开发环境&#xff0c;使得R语言的用户体验更强。一般个人电脑&#xff08;PC, Personal Computer&#xff09;使用单机版的 Rstudio 即可&#xff0c…...

编程日记 2023/5/19 17:41:45

从交通信号灯看流控和拥塞控制

局部的效率和全局的公平一直都是矛盾的双方。对一个统计复用系统&#xff0c;局部效率由流控决定&#xff0c;而全局公平由拥塞控制决定。 交通信号灯是个典型的分时复用流控的实例&#xff0c;但我经常看到绿灯方向没有任何车辆通过&#xff0c;红灯方向却排成了长龙&#xf…...

编程日记 2023/5/19 23:00:57

【LinkedList】| 深度剥析Java SE 源码合集Ⅰ

目录一. &#x1f981; LinkedList介绍二. &#x1f981; 结构以及对应方法分析2.1 结构组成2.1.1 节点类2.1.2 成员变量2.2 方法实现2.2.1 添加add(E e)方法2.2.2 头尾添加元素Ⅰ addFirst(E e)Ⅱ addLast(E e)2.2.3 查找get(int index)方法2.2.4 删除remove()方法三. &#x…...

编程日记 2023/5/19 23:00:54

黑马程序员7

算数运算符重载 运算符重载概念&#xff1a;对已有的运算符重新进行定义&#xff0c;赋予其另一种功能&#xff0c;以适应不同的数据类型 加号运算符 通过自己写函数&#xff0c;实现两个对象相加属性后返回新的对象 两种方式重载 成员函数方式重载 全局函数重载 上来 perso…...

编程日记 2023/5/19 23:00:51

Qt安装与使用经验分享；无.pro文件；无QTextCodec file；Qt小试；界面居中；无缝；更换Qt图标；更换Qt标题。

1、切换安装下载源 《Qt安装教程》先推荐一篇安装文章&#xff1a;《Qt安装教程》 Qt 5.15 之后已经不提供离线安装包了&#xff0c;就是那个 3.7G 的 exe 安装包。请看官方说明&#xff0c;所以只能用在线安装包。 1&#xff0c;下载在线安装包 QT 在线安装包链接&#xff…...

编程日记 2023/5/19 23:00:49

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/7 13:42:04

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/14 7:46:59

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/18 7:09:12

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/15 22:07:34

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/12/19 21:58:48

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/12/14 2:15:52

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/12/3 17:29:54

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/12/18 4:38:22