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

必知的 Vue3 组件传值技巧:解锁组件交互新姿势

在这里插入图片描述

父传子defineProps

基本概念

在 Vue 3 中,父传子是一种组件间通信的方式,用于将父组件的数据传递给子组件。这种通信方式可以让组件之间更好地协作,实现功能的复用和模块的划分。

实现步骤

在父组件中传递数据
App.vue

<template><Header propsName="夏天学编程" propsUrl="xiatian" /><button @click="countAdd">点击</button><Footer :="propsWeb" />
</template>
<script setup>import {reactive} from 'vue';import Header from './header.vue';import Footer from './footer.vue';const propsWeb = reactive({user:'夏天',url:'biancheng',count:10})const countAdd = () => {propsWeb.count++;console.log(propsWeb.count);}
</script>

在子组件中接收数据
在子组件header.vue和footer.vue中,需要使用props来接收父组件传递过来的数据。
首先,通过defineProps函数定义了一个props对象,它包含多个属性,并且指定了其类型。这是一种类型检查的方式,可以确保传递的数据类型符合预期。然后,将props里面的属性值赋值给propsWeb变量,这样就可以在子组件的模板中使用propsWeb来显示父组件传递过来的数据了。

header.vue

<template><h3>Header</h3>
</template>
<script setup>const props = defineProps(["propsName","propsUrl"])console.log(props)
</script>

footer.vue

<template><h3>Footer</h3>
</template>
<script setup>
const props = defineProps({user: String,url: {type: String,Required: true,default: "xiatian.com",},count: Number,
});
console.log(props);
</script>

数据类型检查和默认值

类型检查

在defineProps中可以对传递的数据进行类型检查,除了String类型,还可以是Number、Boolean、Object、Array等。

设置默认值

可以为props设置默认值,当父组件没有传递相应的数据时,子组件就会使用默认值。

动态数据传递

父组件传递的数据可以是动态变化的。例如,父组件中有一个按钮,点击按钮可以改变传递给子组件的数据。
当点击按钮时,count的值会改变,这个变化会自动传递给子组件,子组件会根据新的数据进行更新。这是因为 Vue 的响应式系统会自动跟踪数据的变化,并更新与之相关的组件。


子传父defineEmits

基本概念

在 Vue 3 中,子传父是组件间通信的重要方式。它允许子组件将数据或事件传递给父组件,从而实现组件之间的反向通信,这在构建复杂的应用程序结构时非常有用。

实现步骤

在父组件中监听事件并接收数据
App.vue

<template><Header @gitWeb="emitsGitWeb" @userAdd="emitsUserAdd"/>{{ web.url }} - {{ user }}
</template>
<script setup>import { ref, reactive } from 'vue'const web = reactive({name: "夏天",url: 'xiatian.com'})const user = ref(0)const emitsGitWeb = (data) => {console.log(data)}const emitsUserAdd = (data) => {console.log(data)user.value += data}
</script>

在子组件中触发事件

header.vue

<template><div><h1>我是header</h1><button @click="add">点击</button></div>
</template>
<script setup>const emits = defineEmits(['gitWeb','userAdd'])emits("gitWeb",{name:'夏天学编程',url:'www.xiatian.com'})// 子组件可以向父组件传递多个参数。const add = ()=>{emits('userAdd',10)}
</script>

事件名规范和注意事项

事件名规范

自定义事件名最好遵循一定的命名规范,比如使用小写字母和连字符的组合,这样可以提高代码的可读性。避免使用大写字母开头的驼峰命名法,因为在 HTML 模板中,事件名是大小写不敏感的,可能会导致一些难以发现的问题。

注意事项

父组件在监听子组件事件时,方法名要正确匹配。如果方法名拼写错误或者没有正确定义,那么在子组件触发事件时,父组件将无法正确接收和处理数据。同时,要注意defineEmits函数定义的事件名和子组件中emits触发的事件名要一致,否则事件无法正常触发。

相关文章:

必知的 Vue3 组件传值技巧:解锁组件交互新姿势

父传子defineProps 基本概念 在 Vue 3 中&#xff0c;父传子是一种组件间通信的方式&#xff0c;用于将父组件的数据传递给子组件。这种通信方式可以让组件之间更好地协作&#xff0c;实现功能的复用和模块的划分。 实现步骤 在父组件中传递数据 App.vue <template>…...

【论文阅读】医学SAM适配器:适应医学图像分割的任意分割模型

【论文阅读】医学SAM适配器&#xff1a;适应医学图像分割的任意分割模型 文章目录 【论文阅读】医学SAM适配器&#xff1a;适应医学图像分割的任意分割模型一、介绍二、联系工作三、方法四、实验 Medical SAM Adapter: Adapting Segment Anything Model for Medical Image Segm…...

创新体验触手可及 紫光展锐携手影目科技推出AI眼镜开放平台

近日&#xff0c;紫光展锐携手影目科技共同发布了搭载展锐W517芯片的影目X系列AI眼镜开放平台。这一产品的推出标志着双方在智能穿戴领域的深度协作&#xff0c;将紫光展锐的领先芯片技术与影目的产品创新相融合&#xff0c;合力打造全球智能眼镜市场的标杆产品。这一战略布局不…...

115页PDF | 埃森哲_XX集团信息化能力成熟度评估及能力提升方案(限免下载)

一、前言 这份报告是埃森哲_XX集团信息化能力成熟度评估及能力提升方案&#xff0c;报告首先分析了集团的战略规划&#xff0c;包括调整优化期、转型升级期和跨越发展期的目标&#xff0c;然后识别了集团面临的内部挑战和外部压力&#xff0c;如管控体系不完善、业务板块多样化…...

NumPy,科学计算领域中的Python明星库!

NumPy&#xff0c;科学计算领域中的Python明星库&#xff01; 嘿&#xff0c;大家好呀&#xff0c;今天我们要来聊聊在科学计算领域里大放异彩的 NumPy 库。NumPy 是 Python 中的一个开源库&#xff0c;它提供了大量的数学函数&#xff0c;能够高效地处理大型数组与矩阵运算。…...

Hadoop生态圈框架部署(六)- HBase完全分布式部署

文章目录 前言一、Hbase完全分布式部署&#xff08;手动部署&#xff09;1. 下载Hbase2. 上传安装包3. 解压HBase安装包4. 配置HBase配置文件4.1 修改hbase-env.sh配置文件4.2 修改hbase-site.xml配置文件4.3 修改regionservers配置文件4.4 删除hbase中slf4j-reload4j-1.7.33.j…...

python怎么解决中文注释

最近开发学习Python&#xff0c;当加入中文注释时&#xff0c;运行程序报错&#xff1a; File "red.py", line 10 SyntaxError: Non-ASCII character \xe5 in file red.py on line 10, but no encoding declared; see http://www.python.org/peps/pep-0263.html fo…...

【Unity】Game Framework框架学习使用

前言 之前用过一段时间的Game Framework框架&#xff0c;后来有那么一段时间都做定制小软件&#xff0c;框架就没再怎么使用了。 现在要做大型项目了&#xff0c;感觉还是用框架好一些。于是又把Game Framework拾起来了。 这篇文章主要是讲Game Framework这个框架是怎么用的…...

Linux(CentOS 7) yum一键安装mysql8

1、通过yum安装 &#xff08;1&#xff09;下载mysql 在Linux找个地方输入以下命令 wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm &#xff08;2&#xff09;安装mysql yum 仓库配置文件 [rootVM-8-15-centos ~]# sudo rpm -Uvh mysql80-c…...

Kafka 快速入门(一)

1.1安装部署 1.1.1 集群规划 bigdata01bigdata02bigdata03zookeeperzookeeperzookeeperkafkakafkakafka 1.1.2 集群部署 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html 检查三台虚拟机的zk是否启动&#xff1a;zkServer.sh start 默认启动方式 1)解压…...

丹摩征文活动 | SD3+ComfyUI的图像部署实践

一、前言 作为Stability AI 推出的一款革命性的文本转图像开源模型&#xff0c;Stable Diffusion 3&#xff08;简称SD3&#xff09;在图像质量、文本内容生成、理解复杂指令以及资源利用效率方面&#xff0c;都有着不俗的表现。 SD3的Medium版本&#xff0c;拥有20亿参数&am…...

H.265流媒体播放器EasyPlayer.js网页web无插件播放器:如何优化加载速度

在当今的网络环境中&#xff0c;用户对于视频播放体验的要求越来越高&#xff0c;尤其是对于视频加载速度的期待。EasyPlayer.js网页web无插件播放器作为一款专为现代Web环境设计的流媒体播放器&#xff0c;它在优化加载速度方面采取了多种措施&#xff0c;以确保用户能够享受到…...

【Linux】进程状态的优先级

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各…...

react中的组件传参

在React中&#xff0c;组件之间的数据传递是构建用户界面的关键部分。根据不同的需求和场景&#xff0c;有多种方式可以在React中传递参数&#xff0c;以下是对这些方式的详细说明&#xff1a; 一、通过props传递参数 这是React中最基本和最常用的数据传递方式。父组件通过属…...

HTML5:网页开发的新纪元

文章目录 前言一、HTML5技术概述二、主要特点及优势1. 多媒体支持2. 图形绘制3. 离线存储4. 表单控件增强5. 响应式设计 三、应用场景1. 游戏开发2. 在线教育3. 电子商务 四、面临的挑战结语 前言 在互联网技术快速发展的今天&#xff0c;H5&#xff08;HTML5的简称&#xff0…...

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态 在 Kubernetes 集群中&#xff0c;查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释&#xff0c;帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…...

电信网关配置管理系统 upload_channels.php 文件上传致RCE漏洞复现

0x01 产品简介 中国电信集团有限公司(英文名称“China Telecom”、简称“中国电信”)成立于2000年9月,是中国特大型国有通信企业、上海世博会全球合作伙伴。电信网关配置管理系统是一个用于管理和配置电信网络中网关设备的软件系统。它可以帮助网络管理员实现对网关设备的远…...

ubuntu更改max_map_count

在Ubuntu系统中&#xff0c;max_map_count是一个内核参数&#xff0c;用于限制每个进程可以拥有的内存段的数量。对于Elasticsearch等需要大量内存映射的应用&#xff0c;可能需要增加这个值。 执行以下步骤来更改max_map_count的值&#xff1a; 打开终端。 输入以下命令以编…...

《NPU、CPU、GPU 算力定义和计算方式》

一、引言 在人工智能时代&#xff0c;算力成为了推动技术发展的关键因素之一。不同类型的处理器&#xff0c;如中央处理器&#xff08;CPU&#xff09;、图形处理器&#xff08;GPU&#xff09;和神经网络处理器&#xff08;NPU&#xff09;&#xff0c;在算力方面有着各自的特…...

初级数据结构——顺序表

目录 前言一、定义与特点二、类型三、基本操作四、应用场景五、优缺点六、元素插入和删除动态图解插入删除 七、代码模板八、使用顺序表的经典例题1.求奇数的乘积代码题解 2.数值统计代码题解 九、总结结语 前言 顺序表示最基础的数据结构之一&#xff0c;它也是我们学习开始学…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

MySQL 8.0 事务全面讲解

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