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

vue2与vue3中父子组件传参的区别

本次主要针对vue中父子组件传参所进行讲解

一、vue2和vue3父传子区别

1.vue2的父传子

1).在父组件子标签中自定义一个属性

<sonPage :子组件接收到的类名="传输的数据">子组件</sonPage>

2).在子组件中peops属性中拿到自定属性

props: {子组件接收的名字: [Number],//设置数据的默认类型default: () => {return {// 填写默认值}}
}

2.vue3的父传子

1).在父组件子标签中自定义一个属性

与vue2不同的是,这里有两种方式

一种是与vue2方式相同

<son-page :子组件接收到的类名="传输的数据"></son-page>

另一种是直接使用v-bind

<son-page v-bind="父组件传递的参数"></son=page>

2).子组件通过defineProps接收

//通过数组方式接收参数,这里的msg和abc是父组件传过来的参数名
const foo = defineProps(['msg'])//通过对象方式接收参数1
const foo = defineProps({//可设置接收类型msg: [Number,String]
})//通过对象方式接收参数2
const foo = defineProps({msg:{//对象形式不仅可设置接收类型,还可以设置默认值type:[Number,String],//必须传此参数,否则报错                               required:true},//可接收多个数据类型abc: [Number]
})// 通过 foo.参数名 进行渲染

注意

其中包含了一个required属性,放值为true时必须传此参数,否则会报错

3.区别

1).发送数据

vue3在vue2的基础上多了一种发送数据的方式

2).接收数据

在vue2中是使用props来进行接收父组件传输的数据;

在vue3中则是使用defineProps来进行接收

二、vue2和vue3子传父区别

1.vue2的子传父

1).在父组件子标签中自定义一个事件(方法里面有一个参数用来接收子组件的传值)

<sonPage @父组件接收数据的方法="子组件发送参数的方法"></sonPage>

2).在子组件中this.$emit('自定义事件的名字',传递的数据)

2.vue3的子传父

1).在父组件子标签中自定义一个事件(与vue2相同)

2).子组件发送数据

与vue2不同的是,这里也有两种方式进行发送数据

一种是通过defineEmits发送

//通过defineEmits
const emit = defineEmits(['fromSon'])function fromSon() {emit('fromSon',参数)
}

另一种是直接在点击事件写

//直接在子组件标签传参
<button @click='$emit("fromSon",{参数})'>fromSon</button>

3.区别

1).父组件接收数据(没有区别)

2).子组件发送数据

vue2中发送通过this.$emit进行传输数据

vue3中可直接通过$emit进行传输数据;也可以通过defineEmits来进行数据传输

以上便是本次的分享,如有问题,可以评论或私信

相关文章:

vue2与vue3中父子组件传参的区别

本次主要针对vue中父子组件传参所进行讲解 一、vue2和vue3父传子区别 1.vue2的父传子 1).在父组件子标签中自定义一个属性 <sonPage :子组件接收到的类名"传输的数据">子组件</sonPage> 2).在子组件中peops属性中拿到自定属性 props: {子组件接收的…...

使用vuetify实现全局v-alert消息通知

前排提示&#xff0c;本文为引流文&#xff0c;文章内容不全&#xff0c;更多信息前往&#xff1a;oldmoon.top 查看 简介 使用强大的Vuetify开发前端页面&#xff0c;结果发现官方没有提供简便的全局消息通知组件&#xff08;像Element中的ElMessage那样&#xff09;&#xf…...

CentOS 7.9上编译wireshark 3.6

工作环境是Centos 7.9&#xff0c;原本是通过flathub安装的wireshark&#xff0c;但是在gnome的application installer上升级到wireshark 4.2.3之后就运行不起来了&#xff0c;flatpak run org.wireshark.Wireshark启动提示缺少qt6&#xff0c;查了一下wireshark新版是依赖qt6的…...

初学学习408之数据结构--数据结构基本概念

初学学习408之数据结构我们先来了解一下数据结构的基本概念。 数据结构&#xff1a;是相互之间存在一种或多种特定关系的数据元素的集合。 本内容来源于参考书籍《大话数据结构》与《王道数据结构》。除去书籍中的内容&#xff0c;作为初学者的我会尽力详细直白地介绍数据结构的…...

Java项目中必须使用本地缓存的几种情况

Java项目中必须使用本地缓存的几种情况 在Java项目的开发过程中&#xff0c;为了提高应用的性能和响应速度&#xff0c;缓存机制经常被使用。其中&#xff0c;本地缓存作为一种常见的缓存方式&#xff0c;将数据存储在应用程序的本地内存或磁盘中&#xff0c;以便快速访问。下…...

【鸿蒙 HarmonyOS 4.0】TypeScript开发语言

一、背景 HarmonyOS 应用的主要开发语言是 ArkTS&#xff0c;它由 TypeScript&#xff08;简称TS&#xff09;扩展而来&#xff0c;在继承TypeScript语法的基础上进行了一系列优化&#xff0c;使开发者能够以更简洁、更自然的方式开发应用。值得注意的是&#xff0c;TypeScrip…...

Android java基础_异常

一.异常的概念 在Java中&#xff0c;异常&#xff08;Exception&#xff09;是指程序执行过程中可能出现的不正常情况或错误。它是一个事件&#xff0c;它会干扰程序的正常执行流程&#xff0c;并可能导致程序出现错误或崩溃。 异常在Java中是以对象的形式表示的&#xff0c;…...

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…...

详解顺序结构滑动窗口处理算法

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…...

Java 8中使用Stream来操作集合

Java 8中使用Stream来操作集合 在Java 8中&#xff0c;你可以使用Stream API来操作集合&#xff0c;这使得集合的处理变得更加简洁和函数式。Stream API提供了一系列的中间操作&#xff08;intermediate operations&#xff09;和终端操作&#xff08;terminal operations&…...

MATLAB环境下一种改进的瞬时频率(IF)估计方法

相对于频率成分单一、周期性强的平稳信号来说&#xff0c;具有非平稳、非周期、非可积特性的非平稳信号更普遍地存在于自然界中。调频信号作为非平稳信号的一种&#xff0c;由于其频率时变、距离分辨率高、截获率低等特性&#xff0c;被广泛应用于雷达、地震勘测等领域。调频信…...

解决:selenium web browser 的版本适配问题

文章目录 解决方案&#xff1a;使用 webdriver manager 自动适配驱动 使用 selenium 操控浏览器的时候报错&#xff1a; The chromedriver version (114.0.5735.90) detected in PATH at /opt/homebrew/bin/chromedriver might not be compatible with the detected chrome ve…...

pytest.param作为pytest.mark.parametrize的参数进行调用

pytest.param&#xff1a;在 pytest.mark.parametrize 中可以作为一个指定的参数进行调用 获取数据库&#xff08;网页端&#xff09;数据&#xff0c;通过pytest.param包装成数据包用于pytest.mark.parametrize 中实现数据驱动调用。 import os import pytest import json fr…...

如何判断一个元素是否在可视区域中?

文章目录 一、用途二、实现方式offsetTop、scrollTopgetBoundingClientRectIntersection Observer创建观察者传入被观察者 三、案例分析参考文献 一、用途 可视区域即我们浏览网页的设备肉眼可见的区域&#xff0c;如下图 在日常开发中&#xff0c;我们经常需要判断目标元素是…...

Go Run - Go 语言中的简洁指令

原文&#xff1a;breadchris - 2024.02.21 也许听起来有些傻&#xff0c;但go run是我最喜欢的 Go 语言特性。想要运行你的代码&#xff1f;只需go run main.go。它是如此简单&#xff0c;我可以告诉母亲这个命令&#xff0c;她会立即理解。就像 Go 语言的大部分功能一样&…...

Spring全面精简总结

Spring两大核心功能&#xff1a;IOC控制反转、AOP面向切面的编程 控制反转(loC&#xff0c;Inversion of Control)&#xff0c;是一个概念&#xff0c;是一种思想。指将传统上由程序代码直接操控的对象调用权交给容器&#xff0c;通过容器来实现对象的装配和管理。控制反转就是…...

低代码开发如何助力数字化企业管理系统平台构建

随着数字化时代的到来&#xff0c;企业对于管理系统的需求日益增长。高效的管理系统可以提高企业的运作效率&#xff0c;降低成本&#xff0c;提升竞争力。然而&#xff0c;传统的开发方式在应对日益复杂的管理系统需求时&#xff0c;显得力不从心。低代码开发作为一种新兴的开…...

ElasticSearch之零碎知识点

写在前面 本文记录es的零碎知识点&#xff0c;包括但不限于概念&#xff0c;集群方式&#xff0c;等。 1&#xff1a;词项查询 VS 全文查询 词项查询&#xff1a;查询的内容不做分词处理&#xff0c;输入的什么查询什么。 全文查询&#xff1a;查询的内容会做分词处理&…...

【春运抢票攻略浅析】

参考 最全12306放票规则&#xff0c;抢票策略&#xff0c;候补作用2023年12306抢票攻略&#xff08;纯技巧&#xff09; 研究放票规则&#xff0c;候补的时候车次进行一下挑选&#xff0c;能够买长乘短的尽量买长&#xff0c;不要候补一些区间票吧&#xff0c;这是一开始放票…...

【Java EE初阶二十五】简单的表白墙(一)

1. 前端部分 1.1 前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...