Vue3之组件间传值

news2024/12/24 9:15:28

何为组件间传值

在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的值，则会校验失败，然后报警告

在这里插入图片描述

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/389415.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言再学习第三章

C语言再学习第三章

例题3-1 编写一个函数&#xff0c;实现华氏度和摄氏度的转化。 已知公式&#xff1a;c &#xff08;5/9)*(f-32) #include <stdio.h>double f_value 0; double c_value 0; int main(void) {printf("请输入华氏温度\n");scanf("%lf",&f_valu…
阅读更多...
两阶段提交(2 Phase Commit) 在 PostgreSQL 和 RocksDB 中的实现

两阶段提交(2 Phase Commit) 在 PostgreSQL 和 RocksDB 中的实现

文章目录前言用法PostgreSQLRocksDB实现PostgreSQL 2PCRocksDB 2PCWRITE_COMMITTEDWRITE_PREPARED解决 snapshot-read 问题解决 rollback 问题WRITE_UNPREPARED总结前言 本节中提到的代码实现是基于 PG&#xff1a;REL_15_STABLE 和 Rocksdb: master-fcd816d534 代码介绍的 2PC…
阅读更多...
shell：#!/usr/bin/env python作用是什么

shell：#!/usr/bin/env python作用是什么

我们经常会在别人的脚本文件里看到第一行是下面这样 #!/usr/bin/python或者 #!/usr/bin/env python 那么他们有什么用呢&#xff1f; 要理解它&#xff0c;得把这一行语句拆成两部分。 第一部分是 #! 第二部分是 /usr/bin/python 或者 /usr/bin/env python 关于 #! 这个…
阅读更多...
Java8 新特性 之 lambda 表达 和 函数式接口

Java8 新特性 之 lambda 表达 和 函数式接口

—— lambda 表达式 概念 lambda 表达式是一个匿名函数&#xff0c;可以把 lambda 表达式理解为是一段可以传递的代码。更简洁、更灵活&#xff0c;使 Java 的语言表达能力得到了提升lambda 表达式是作为接口的实现类的对象&#xff08;万事万物皆对象&#xff09; 使用语法…
阅读更多...
世界那么大，你哪都别去了，来我带你了解CSS3(三)

世界那么大，你哪都别去了，来我带你了解CSS3(三)

文章目录‍❤️‍&#x1f525;CSS动画‍❤️‍&#x1f525;CSS雪碧图‍❤️‍&#x1f525;CSS字体图标‍❤️‍&#x1f525;CSS盒子模型&#xff08;Box Model&#xff09;‍❤️‍&#x1f525;CSS新特性‍❤️‍&#x1f525;CSS动画 动画是使元素从一种样式逐渐变化为另…
阅读更多...
【Rides】使用Xshell 链接云服务器安装Rides及其三种启动方法详解

【Rides】使用Xshell 链接云服务器安装Rides及其三种启动方法详解

文章目录一.NoSQL和SQl的概念1.1 总结二.Rides2.1 Rides特点2.2 Rides安装2.2.1 上传安装包并解压2.3 Redis启动&#xff08;前台启动不推荐&#xff09;2.4.指定配置启动2.5 开机自启三.Redis客户端2.1.Redis命令行客户端2.2.图形化桌面客户端2.2.1.安装2.2.2.建立连接一.NoSQ…
阅读更多...
Vue.js 实现带拖动功能的时间轴

Vue.js 实现带拖动功能的时间轴

带拖动功能的时间轴timeline-slider-vueDemoGithub环境node V12.20.0npm 6.14.8&#x1f4e6; Installnpm install --save timeline-slider-vue全局引用main.jsimport TimelineSliderVue from timeline-slider-vueimport timeline-slider-vue/lib/timeline-slider-vue.cssVue.u…
阅读更多...
数据库复习

数据库复习

什么是数据库系统 数据库系统是指在计算机系统中引入数据库后构成的系统&#xff0c;一般由数据库、数据库管理系统(及其开发工具)、应用系统、数据库管理员和用户构成 数据库系统的特点是什么&#xff1f; 数据结构化数据的共享性高&#xff0c;冗余度低且易扩充数据独立性高数…
阅读更多...
吐血整理的TCP协议相关原理

吐血整理的TCP协议相关原理

文章目录一、 TCP报文的结构二、TCP建立连接-三次握手2.1 三次握手建立连接的过程2.2 三次握手的思考2.3 针对连接过程的DDOS攻击-SYN flood三、 TCP断开链接-四次挥手3.1 客户端主动断开链接的过程3.2 四次挥手的思考四、 TCP状态机六、 TCP的流量控制-滑动窗口协议七、 TCP拥…
阅读更多...
openpnp - 顶部相机高级矫正的细节

openpnp - 顶部相机高级矫正的细节

文章目录openpnp - 顶部相机高级矫正的细节概述ENDopenpnp - 顶部相机高级矫正的细节 概述 设备到手的时候, 只有一个主校准点, 是一块只带一个mark点的小PCB拧在设备正面前部中间的凸台上. 配置openpnp时, 需要指定次校准点. 开始自己做了一块长条形PCB, 上面有mark点, 拧在…
阅读更多...
【C++知识点】重载

【C++知识点】重载

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;C/C知识点 &#x1f4e3;专栏定位&#xff1a;整理一下 C 相关的知识点&#xff0c;供大家学习参考~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;…
阅读更多...
阿赵的MaxScript学习笔记分享十二《获取和导出各种数据》

阿赵的MaxScript学习笔记分享十二《获取和导出各种数据》

大家好&#xff0c;我是阿赵&#xff0c;周日的早上继续分享MaxScript学习笔记&#xff0c;这是第十二篇&#xff0c;获取和导出各种数据 1、导出数据的目的 使用3DsMax建立3D模型后&#xff0c;很多时候需要输出模型到别的引擎去使用&#xff0c;常用的格式有Obj、FBX、SLT等…
阅读更多...
geoserver之BlobStores使用

geoserver之BlobStores使用

概述 geoserver是常用的地图服务器之一&#xff0c;除了基本的能力之外&#xff0c;也提供了很多的插件方便大家使用。在本文&#xff0c;讲述一下如何在geoserver中使用BlobStores和gwc-sqlite-plugin插件实现地图的切片和部署。 BlobStores简介 在geoserver中&#xff0c;…
阅读更多...
Linux安装Nginx和Nginx基础配置

Linux安装Nginx和Nginx基础配置

下载Nginx 方式一&#xff1a;通过官网下载后上传 通过官网下载安装包。下载地址https://nginx.org/en/download.html 这里选择稳定版的进行下载。 这里使用FinalShell终端工具操作&#xff0c;使用其他工具操作亦可。FinalShell工具下载地址&#xff1a;http://www.hostbuf…
阅读更多...
带加权的贝叶斯自举法 Weighted Bayesian Bootstrap

带加权的贝叶斯自举法 Weighted Bayesian Bootstrap

在去年的文章中我们介绍过Bayesian Bootstrap&#xff0c;今天我们来说说Weighted Bayesian Bootstrap Bayesian bootstrap 贝叶斯自举法&#xff08;Bayesian bootstrap&#xff09;是一种统计学方法&#xff0c;用于在缺乏先验知识的情况下对一个参数的分布进行估计。这种方…
阅读更多...
【Node.js】HTTP协议、HTTP的请求报文和响应报文

【Node.js】HTTP协议、HTTP的请求报文和响应报文

HTTP协议、HTTP的请求报文和响应报文HTTP协议HTTP主要特点HTTP的请求报文和响应报文请求报文请求行请求消息头空行请求体响应报文响应状态行响应消息头空行响应体总结HTTP协议 HTTP 全称为超文本传输协议&#xff0c;是用于从WWW服务器传输超文本到本地浏览器的传送协议&#…
阅读更多...
硬件基础专题-01电阻篇

硬件基础专题-01电阻篇

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

linux入门---权限

目录标题什么是权限人的分类为什么会有所属组查看文件属性文件的分类如何查看权限文件不同权限的表现rwx权限修改八进制权限修改umask有关内容文件中人的修改目录不同权限的表现rwx什么是权限 首先来看一个例子&#xff1a;比如说我没有爱奇艺的vip&#xff0c;那么我也就没有…
阅读更多...
训练CV模型常用的方法与技巧

训练CV模型常用的方法与技巧

最近参加一个CV比赛&#xff0c;看到有参赛者分享了自己训练图像识别模型时常用到的小技巧&#xff0c;故对其进行记录、整理&#xff0c;方便未来继续学习。整理了很多&#xff0c;它们不一定每次有用&#xff0c;但请记在心中&#xff0c;说不定未来某个任务它们就发挥了作用…
阅读更多...
JavaScript-扫盲

JavaScript-扫盲

文章目录1. 前言2. 第一个 JavaScript 程序3. javaScript 的基础语法3.1 变量3.2 数据类型3.3 运算符3.4 条件语句3.5 数组3.6 函数3.7 作用域3.8 对象4. WebAPI4.1 DOM 基本概念4.2 常用 DOM API4.3 事件4.4 操作元素4.5 网页版猜数字游戏4.6 留言版1. 前言 提问 java 和 java…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023