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

Vue3之组件间传值

news 2025/7/8 6:55:01

何为组件间传值

在Vue3之组件文章中，我们学会了定义使用组件，但是我们似乎还缺少什么将组件之间联系起来，说到组件之间的联系就不得不提组件间的传值，而组件间的传值其实也不难理解，就是如何在子组件中接收到父组件传递到值。本文就介绍如何将父组件中的值传递到子组件中。

实例解析

组件间传值分为静态传参和动态传参。动态传参顾名思义就是传递的参数可以动态变化。静态传参是直接传参数，传的是固定字符串。另外，组件间还可以传递多个参数并且对传递的参数做校验。

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({template: `<div><test content = "hello world"/></div>` });// 定义一个test组件app.component('test',{props: ['content'],template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>

如上例所示，我们定义了一个test组件用于演示，在父组件中调用子组件test，并从父组件中传递一个content为hello world的内容给子组件，在父组件中传递的时候直接使用类似于定义div属性的方式：
<test content = "hello world"/>
子组件接收的时候，需要加一个props属性去接收,然后再显示出来：

props: ['content'],
template: `<div>{{content}}</div>`

这时我们在浏览器中运行html代码就可以得到：
在这里插入图片描述

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:456}},template: `<div><test v-bind:content = "num"/></div>` });// 定义一个test组件app.component('test',{props: ['content'],template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>

如上面的代码所示，我们定义的组件和静态传参数时定义的一样，不同的是传递值的父组件，在父组件中，我们需要将需要改变的值定义到data()方法中，再通过v-bind的方式绑定数据到子组件中，代码如下：

const app = Vue.createApp({data() {return {num:456}},template: `<div><test v-bind:content = "num"/></div>` });

<test v-bind:content = "num"/> 也可以简写成 <test :content = "num"/>

3 组件间传递多个参数

从上面的例子中我们知道要在组件间传递值，需要定义一个属性，填充数据，然后在对应的组件中使用一个props去接收，那当我们需要在组件间传递多个参数时，我们需要定义多个参数吗？我们先看下面的代码：

<!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:456,a:123,b:456,c:789}},template: `<div><test v-bind:content = "num" :a="a" :b="b" :c="c"/></div>` });// 定义一个test组件app.component('test',{props: ['content','a','b','c'],template: `<div>{{content}}---{{a}}---{{b}}---{{c}}</div>`});const vm = app.mount('#root');
</script>
</html>

我们假设要传递四个参数，num,a,b,c到自组件，上面的代码中,我们可以看到要定义四个属性和值，写起来特别的麻烦，因为目前就四个参数，如果要是需要传十几个参数时，再这么写就很繁琐了，而且容易写错。虽然可以运行，上面的代码运行结果：
在这里插入图片描述我们传递多个值的正确方法应该是传递一个对象过去，这个对象中保存了我们想要传递的所有参数，这样的话会方便很多，如下：

<!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 {params:{num:456,a:123,b:456,c:789}}},template: `<div><test v-bind = "params"/></div>` });// 定义一个test组件app.component('test',{props: ['num','a','b','c'],template: `<div>{{num}}---{{a}}---{{b}}---{{c}}</div>`});const vm = app.mount('#root');
</script>
</html>

传递多个参数时可以在data()方法中定义一个对象，如本例中的，params。

   data() {return {params:{num:456,a:123,b:456,c:789}}}

传递的时候通过v-bind = "params" 传递，使用的时候也是通过props接收，想要啥数据接收啥数据

   app.component('test',{props: ['num','a','b','c'],template: `<div>{{num}}---{{a}}---{{b}}---{{c}}</div>`});

这就实现了组件之间传递多个值

4.组件间传值校验

有时候我们需要对传递过来的值进行校验，看传递过来的值是不是我们想要的类型，或者是传递过来的值是否符合我们的条件，这些校验工作需要在客户端实现。

示例代码：

<!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 {value:123}},template: `<div><test :content = "value"/></div>` });// 定义一个test组件app.component('test',{props: {content:String},template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>

父组件传递值的时候还是和以前一样，只是在接收值的时候，我们使用的方式是：props{}的方式

 app.component('test',{props: {content:String},template: `<div>{{content}}</div>`});

这里的意思是我们希望接收到的数据是string类型的，假设父组件给我传递的类型不是string类型的，如上面的例子，就会报警告，我们运行代码并且打开网页的检查选项可以看到如下的结果：

在这里插入图片描述

我们发现虽然也能显示传递过来的值，但是会报警告，假设我们传递过来的值类型是正确的，那么就不会报警，我们可以把父组件中的值改成string类型的。这时候我们会发现警告消失了。

在这里插入图片描述

注：可以校验的值有 String，Boolena,Array,Object,Functon,Symbol

在接收值的时候，我们还可以如下校验我们接收的值：

 // 定义一个test组件app.component('test',{props: {content:{type:String,required:true}},template: `<div>{{content}}</div>`});

接收的时候对content进行多方面验证，比如是否是必须传递的，加required关键字，这时如果传递过来的数据不符合要求，就会报警告，比如我们要求传String 类型的结果却传来int,这时结果就是：

在这里插入图片描述

我们也可以加一个default项假如父组件不传递值的话默认显示的值：

 // 定义一个test组件app.component('test',{props: {content:{type:String,default:"9527"}},template: `<div>{{content}}</div>`});

父组件不传递值的话就会显示设置的默认值：9527

在这里插入图片描述

假如我们想要对传递的值本身做下验证，比如规定传递的值必须小于某个值应该怎么做呢，这就需要用到validator属性了，具体如下

<!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 {value:300}},template: `<div><test :content = "value"/></div>` });// 定义一个test组件app.component('test',{props: {content:{type:Number,validator:function(value){return value < 200;}}},template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>

上面的例子中我们接收值的时候做了验证，接收的值必须小于200

  props: {content:{type:Number,validator:function(value){return value < 200;}}}

如果我们传一个大于200的值，则会校验失败，然后报警告

在这里插入图片描述

总结

本文我们学习了组件之间的传参分为动态传参和静态传参以及传递多个参数和对传递的参数做验证，组件间的传参可以方便我们在父组件和子组件间通信，在提高组件的复用性的同时也让组件间可以很好的结合起来。建议读者多做练习，熟练掌握。

相关文章：

Vue3之组件间传值

何为组件间传值 在Vue3之组件文章中&#xff0c;我们学会了定义使用组件&#xff0c;但是我们似乎还缺少什么将组件之间联系起来&#xff0c;说到组件之间的联系就不得不提组件间的传值&#xff0c;而组件间的传值其实也不难理解&#xff0c;就是如何在子组件中接收到父组件传…...

编程日记 2023/5/14 20:09:24

Windows10下使用CMake编译ITK5.2.1步骤

编译环境&#xff1a;Windows10VS2017Cmak3.24.0ITK5.2.1 编译步骤&#xff1a; 1、下载ITK到本地&#xff1a;ITK官网Download | ITK&#xff0c;ITK5.2.1下载地址 https://github.com/InsightSoftwareConsortium/ITK/releases/download/v5.2.1/InsightToolkit-5.2.1.zip ​…...

编程日记 2023/3/6 5:18:37

字符串模式匹配，经典KMP算法你还不会？我可不允许你不会！

文章目录重点1. 简单模式匹配算法2. 部分匹配值PM的算法&#xff08;Move j-1 PM[j-1]&#xff09;3. 部分匹配值PM的两次改进&#xff08;Move j-next[j]&#xff09;4. 快速得到next数组5. KMP匹配算法重点 童鞋们看网上讲解的时候一定要分清楚序列是从0开始还是从1开始&…...

编程日记 2023/3/6 5:17:28

C++操作redis（实现连接池、分布式锁）

文章目录Redis连接池编译项目整体架构使用分布式锁总结Redis连接池 封装hiredis的一些基本操作&#xff0c;redishelper类提供包含连接&#xff0c;放回&#xff0c;存取键&#xff0c;push&#xff0c;pop&#xff0c;执行redis语句和执行lua脚本的函数&#xff0c;连接池是类…...

编程日记 2023/3/6 5:16:20

硬件基础专题-01电阻篇

目录 课程链接 学习目的 电阻 电阻理论讲解 电阻定义​ 欧姆定律​ 电阻单位换算 电阻选型考虑 安装方式 常见电阻值 各种贴片电阻的读取方式 确定电阻值的方法 电阻数据手册 电阻测量 电阻的产品应用​ 零欧姆电阻 热敏电阻 光敏电阻 课程链接 视频专辑 - 硬件…...

编程日记 2023/3/6 5:15:14

【JAVA程序设计】(C00112)基于Springboot+Thymeleaf的在线购物商城——有文档

基于SpringbootThymeleaf的在线购物商城——有文档项目简介项目获取开发环境项目技术运行截图运行视频项目简介 基于Springbootthymeleaf框架的在线购物商城系统&#xff0c;本系统共分为二个角色&#xff1a;管理员和用户 管理员角色包含以下功能&#xff1a; 商品管理、商品…...

编程日记 2023/3/6 5:14:04

shell基础（5）算数计算：运算语法、自增自减

文章目录1. shell算数运算的特点2. 运算符一览3. 运算语法3.1 整形运算3.2. 小数运算 ing4. 自增自减4.1. a与a4.2. 自加1. shell算数运算的特点 Shell 和其它编程语言不同&#xff0c;Shell 不能直接进行算数运算&#xff0c;必须使用数学计算命令。Shell只支持整数运算&#…...

编程日记 2023/3/6 5:12:54

virtio设备input节点

注册virtio_input_node节点&#xff0c;节点类型为VLIB_NODE_TYPE_INPUT。 VLIB_REGISTER_NODE (virtio_input_node) {.name "virtio-input",.sibling_of "device-input",.format_trace format_virtio_input_trace,.flags VLIB_NODE_FLAG_TRACE_SUPP…...

编程日记 2023/3/6 5:11:43

《计算机网络：自顶向下方法》学习笔记——第一章：计算机网络和因特网

计网 第一章 计算机网络和因特网 1.1 什么是因特网 回答这个问题有两种方式 其一&#xff0c;我们能够描述因特网的具体构成&#xff0c;即构成因特网的基本硬件和软件组件&#xff1b;其二&#xff0c;我们能够根据为分布式应用提供服务的联网基础设施来描述因特网。 1.1.…...

编程日记 2023/3/6 5:10:32

PDF 解析格式化输出 API 数据接口

PDF 解析格式化输出 API 数据接口 支持输出 TEXT HTML XML TAG&#xff0c;多种格式输出&#xff0c;超精准识别率。 1. 产品功能 通用的识别接口&#xff0c; 支持标准 PDF 文件解析&#xff1b;多种格式输出&#xff0c;支持 TEXT HTML XML TAG&#xff1b;HTML 包含完美排…...

编程日记 2023/3/6 5:09:19

RL笔记：基于策略迭代求CliffWaking-v0最优解(python实现)

目录 1. 概要 2. 实现 3. 运行结果 1. 概要 CliffWalking-v0是gym库中的一个例子[1]&#xff0c;是从Sutton-RLbook-2020的Example6.6改编而来。不过本文不是关于gym中的CliffWalking-v0如何玩的&#xff0c;而是关于基于策略迭代求该问题最优解的实现例。 CliffWalking-v0的…...

编程日记 2023/3/6 5:08:10

350. 两个数组的交集 II

两个数组的交集 II 给你两个整数数组 nums1 和 nums2 &#xff0c;请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数&#xff0c;应与元素在两个数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取较小值&#xff09;。可以不考虑输出结…...

编程日记 2023/3/6 5:07:00

Android仿微信选择图片

效果展示首先先添加用到的权限<uses-permission android:name"android.permission.INTERNET" /><!--获取手机存储卡权限--><uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:nam…...

编程日记 2023/3/6 5:05:50

python+嵌入式——串口通信篇(收发解包)

目录前言安装pyserialpyserial大致概括整体流程硬件连接例子(简单版)详细使用serial初始化参数发包收包收包检查包并解包python struct模块结语前言 这几年&#xff0c;自己也做了一些嵌入式机器人。在整个开发的过程中&#xff0c;调通信通常会花费一段比较长的时间&#xff…...

编程日记 2023/5/23 4:07:42

剖析G1 垃圾回收器

简单回顾 在Java当中&#xff0c;程序员在编写代码的时候只需要创建对象&#xff0c;从来不需要考虑将对象进行释放&#xff0c;这是因为Java中对象的垃圾回收全部由JVM替你完成了(所有的岁月静好都不过是有人替你负重前行)。 而JVM的垃圾回收由垃圾回收器来负责&#xff0c;在…...

编程日记 2023/5/23 4:07:28

如何打造一款专属于自己的高逼格电脑桌面

作为一名电脑重度使用者&#xff0c;你是否拥有一款属于你自己的高逼格电脑桌面呢&#xff1f;你是不是也像大多数同学一样&#xff0c;会把所有的内容全部都堆积到电脑桌面&#xff0c;不仅找东西困难&#xff0c;由于桌面内容太多还会导致C盘空间不足&#xff0c;影响电脑的反…...

编程日记 2023/5/23 4:07:21

【C++】string的使用及其模拟实现

文章目录1. STL的介绍1.1 STL的六大组件1.2 STL的版本1.3 STL的缺陷2. string的使用2.1 为什么要学习string类&#xff1f;2.2 常见构造2.3 Iterator迭代器2.4 Capacity2.5 Modifiers2.6 String operations3. string的模拟实现3.1 构造函数3.2 拷贝构造函数3.3 赋值运算符重载和…...

编程日记 2023/5/23 4:07:10

怀念在青鸟的日子

时间过的可真快&#xff0c;一转眼来到了2023年&#xff01;我初中上完就没有在念&#xff0c;下了学门步入社会&#xff0c;那时的我一片迷茫&#xff0c;不知道该去干什 么&#xff0c;父母说要不去学挖掘机、理发、修车...我思考再三&#xff0c;一个都没有我喜欢的&#xf…...

编程日记 2023/5/23 4:06:56

学习记录---Python内置类型

文章目录字符串split()列表常见操作列表相减字典创建普通创建eval(s)添加或更新元素d[t] 1d.update({c: 3}){**d1, **d2} **字典解包装运算符删除元素 d.pop(c)属性d.items()d.keys()d.values()访问元素d[Name]d.get(score)遍历字典for key in dictfor key, values in dict.it…...

编程日记 2023/5/23 4:06:46

Python笔记 -- 列表

文章目录1、列表简介2、修改、添加、删除元素2.1、添加2.2、删除3、排序、倒序4、遍历列表5、创建数值列表6、列表切片7、列表复制8、元组1、列表简介 在Python中用方括号[]表示列表&#xff0c;用逗号隔开表示其元素 通过索引访问列表 names [aa,bb,cc,dd]print(names[0]) …...

编程日记 2023/5/23 4:06:38

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/7/6 20:12:25

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/7/2 15:02:24

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/7/6 13:40:50

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/6/15 15:47:35

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/8 4:43:42

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/7/7 3:26:15

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/7/6 19:09:54

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/7/7 18:48:44

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/7/7 21:26:32