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

vue3组件通信--props

目录

  • 1.父传子
  • 2.子传父

最近在做项目的过程中发现,props父子通信忘的差不多了。下面写个笔记复习一下。

1.父传子

父组件(FatherComponent.vue):

<script setup>
import ChildComponent from "@/components/ChildComponent.vue"
import { ref } from "vue"const fatherMoney = ref(1000)
</script><template><div class="bg-blue h-75 w-100 ma-auto"><h1 class="text-center">我是父组件</h1><ChildComponent :money="fatherMoney"></ChildComponent></div>
</template>

我们可以在子组件标签上写:money="fatherMoney"。意思就是把父亲的响应式变量fatherMoney给子组件,子组件在组件内部要用money来接受这个变量。
子组件(ChildComponent.vue):

<script setup>
const props = defineProps(['money','updateMoney'])
</script><template><div class="bg-purple h-50 w-75 ma-auto"><h1 class="text-center">我是子组件</h1><h3>父亲给我的钱:{{money}}元</h3></div>
</template>

子组件<h3>父亲给我的钱:{{money}}元</h3>这一块儿,我们可以用props.money来渲染这个数据,也可以省略props,直接写money

注意,用props来接受的数据是只读的,子组件不能再组件内部更改它。
比如,不能下面这样写,否则控制台会报错:

<script setup>
const props = defineProps(['money'])const updateMoney = () => {props.money = 100
}
</script><template><div class="bg-purple h-50 w-75 ma-auto"><h1 class="text-center">我是子组件</h1><h3>父亲给我的钱:{{money}}元</h3><v-btn @click="updateMoney" class="text-white bg-blue">修改父亲给我的钱</v-btn></div>
</template>

在这里插入图片描述

2.子传父

子组件向父组件发送数据,父组件需要定义一个方法,用来接受子组件发送的数据:
父组件(FatherComponent.vue):

<script setup>
import ChildComponent from "@/components/ChildComponent.vue"
import { ref } from "vue"const fatherMoney = ref(1000)const childToy = ref('')
const getToy = (value)=>{childToy.value = value
}
</script><template><div class="bg-blue h-75 w-100 ma-auto"><h1 class="text-center">我是父组件</h1><h3>儿子给我的玩具:{{childToy}}</h3><ChildComponent :money="fatherMoney" :sendToy="getToy"></ChildComponent></div>
</template>

:sendToy="getToy"意思就是,父组件给子组件传递了一个方法getToy,子组件要用方法sendToy,给父亲发送数据。
子组件(ChildComponent.vue):

<script setup>
import {ref} from "vue"const props = defineProps(['money','sendToy'])const toy = ref('奥特曼')
</script><template><div class="bg-purple h-50 w-75 ma-auto"><h1 class="text-center">我是子组件</h1><h3>父亲给我的钱:{{money}}元</h3><v-btn @click="sendToy(toy)" class="text-white bg-blue">把玩具给父亲</v-btn><h3>儿子的玩具:{{toy}}</h3></div>
</template>

在这里插入图片描述

相关文章:

vue3组件通信--props

目录 1.父传子2.子传父 最近在做项目的过程中发现&#xff0c;props父子通信忘的差不多了。下面写个笔记复习一下。 1.父传子 父组件&#xff08;FatherComponent.vue&#xff09;&#xff1a; <script setup> import ChildComponent from "/components/ChildComp…...

leetcode-75-颜色分类

题解&#xff08;方案二&#xff09;&#xff1a; 1、初始化变量n0&#xff0c;代表数组nums中0的个数&#xff1b; 2、初始化变量n1&#xff0c;代表数组nums中0和1的个数&#xff1b; 3、遍历数组nums&#xff0c;首先将每个元素赋值为2&#xff0c;然后对该元素进行判断统…...

【嵌入式原理设计】实验三:带报警功能的数字电压表设计

目录 一、实验目的 二、实验环境 三、实验内容 四、实验记录及处理 五、实验小结 六、成果文件提取链接 一、实验目的 熟悉和掌握A/D转换及4位数码管、摇杆、蜂鸣器的联合工作方式 二、实验环境 Win10ESP32实验开发板 三、实验内容 1、用摇杆传感器改变接口电压&…...

C#中的接口的使用

定义接口 public interface IMyInterface {int MyProperty { get; set; }void MyMethod(); } 实现类 internal class MyClass : IMyInterface {public int MyProperty { get; set; }public void MyMethod(){Console.WriteLine("MyMethod is called");} } 目录结构…...

记一次真实项目的性能问题诊断、优化(阿里云redis分片带宽限制问题)过程

前段时间&#xff0c;接到某项目的压测需求。项目所有服务及中间件&#xff08;redis、kafka&#xff09;、pg库全部使用的阿里云。 压测工具&#xff1a;jmeter(分布式部署)&#xff0c;3组负载机&#xff08;每组1台主控、10台linux 负载机&#xff09; 问题现象&#xff1…...

LeetCode - 4. 寻找两个正序数组的中位数

. - 力扣&#xff08;LeetCode&#xff09; 题目 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1&#xff1a; 输入&#xff1a;nums1 …...

算法设计与分析——动态规划

1.动态规划基础 1.1动态规划的基本思想 动态规划建立在最优原则的基础上&#xff0c;在每一步决策上列出可能的局部解&#xff0c;按某些条件舍弃不能得到最优解的局部解&#xff0c;通过逐层筛选减少计算量。每一步都经过筛选&#xff0c;以每一步的最优性来保证全局的最优性…...

【实战篇】GEO是什么?还可以定义新的数据类型吗?

背景 之前&#xff0c;我们学习了 Redis 的 5 大基本数据类型&#xff1a;String、List、Hash、Set 和 Sorted Set&#xff0c;它们可以满足大多数的数据存储需求&#xff0c;但是在面对海量数据统计时&#xff0c;它们的内存开销很大&#xff0c;而且对于一些特殊的场景&…...

SpringBoot最佳实践之 - 项目中统一记录正常和异常日志

1. 前言 此篇博客是本人在实际项目开发工作中的一些总结和感悟。是在特定需求背景下&#xff0c;针对项目中统一记录日志(包括正常和错误日志)需求的实现方式之一&#xff0c;并不是普适的记录日志的解决方案。所以阅读本篇博客的朋友&#xff0c;可以参考此篇博客中记录日志的…...

【Flutter】状态管理:高级状态管理 (Riverpod, BLoC)

当项目变得更加复杂时&#xff0c;简单的状态管理方式&#xff08;如 setState() 或 Provider&#xff09;可能不足以有效地处理应用中状态的变化和业务逻辑的管理。在这种情况下&#xff0c;高级状态管理框架&#xff0c;如 Riverpod 和 BLoC&#xff0c;可以提供更强大的工具…...

OAK相机的RGB-D彩色相机去畸变做对齐

▌低畸变标准镜头的OAK相机RGB-D对齐的方法 OAK相机内置的RGB-D管道会自动将深度图和RGB图对齐。其思想是将深度图像中的每个像素与彩色图像中对应的相应像素对齐。产生的RGB-D图像可以用于OAK内置的图像识别模型将识别到的2D物体自动映射到三维空间中去&#xff0c;或者产生的…...

smartctl硬盘检查工具

一、smartctl工具简介   Smartmontools是一种硬盘检测工具&#xff0c;通过控制和管理硬盘的SMART(Self Monitoring Analysis and Reporting Technology)&#xff0c;自动检测分析及报告技术)技术来实现的&#xff0c;SMART技术可以对硬盘的磁头单元、盘片电机驱动系统、硬盘…...

清空MySQL数据表

要清空 MySQL 数据表&#xff0c;您可以使用 TRUNCATE 或 DELETE 命令 使用 TRUNCATE 命令 TRUNCATE 命令用于删除表中的所有数据&#xff0c;并重置自增 ID&#xff08;如果存在&#xff09;&#xff1a; TRUNCATE TABLE table_name;将 table_name 替换为您要清空的表的名称…...

2024年妈杯MathorCup大数据竞赛A题超详细解题思路

2024年妈杯大数据竞赛初赛整体难度约为0.6个国赛。A题为台风中心路径相关问题&#xff0c;为评价预测问题&#xff1b;B题为库存和销量的预测优化问题。B题难度稍大于A题&#xff0c;可以根据自己队伍情况进行选择。26日早六点之前发布AB两题相关解题代码论文。 下面为大家带来…...

Kafka系列之:Kafka集群磁盘条带划分和Kafka集群磁盘扩容详细方案

Kafka系列之:Kafka集群磁盘条带划分和Kafka集群磁盘扩容详细方案 一、lsblk命令二、Kafka节点磁盘条带化方案一三、Kafka节点磁盘条带化方案二四、理解逻辑区块LE五、查看kafka节点磁盘条带划分情况六、Kafka节点磁盘扩容一、lsblk命令 lsblk命令用于列出块设备的信息,包括磁…...

【LeetCode】修炼之路-0007- Reverse Integer (整数反转)【python】

题目 Reverse Integer Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0. Assume the environment does not allow you to store 64-b…...

【Flutter】页面布局:线性布局(Row 和 Column)

在 Flutter 中&#xff0c;布局&#xff08;Layout&#xff09;是应用开发的核心之一。通过布局组件&#xff0c;开发者可以定义应用中的控件如何在屏幕上排列。Row 和 Column 是 Flutter 中最常用的两种线性布局方式&#xff0c;用于水平和垂直排列子组件。在本教程中&#xf…...

C语言巨难题:执行操作可获得的最大总奖励 I(C语言版)

1.题目&#xff1a; 给你一个整数数组 rewardValues&#xff0c;长度为 n&#xff0c;代表奖励的值。 最初&#xff0c;你的总奖励 x 为 0&#xff0c;所有下标都是 未标记 的。你可以执行以下操作 任意次 &#xff1a; 从区间 [0, n - 1] 中选择一个 未标记 的下标 i。如果…...

【力扣】GO解决子序列相关问题

文章目录 一、引言二、动态规划方法论深度提炼子序列问题的通用解法模式 三、通用方法论应用示例&#xff1a;最长递增子序列&#xff08;LeetCode题目300&#xff09;Go 语言代码实现 四、最长连续递增序列&#xff08;LeetCode题目674&#xff09;Go 语言代码实现 五、最长重…...

Ubuntu20.04安装VM tools并实现主机和虚拟机之间文件夹共享

1、Ubuntu20.04安装VM tools 参考这个&#xff0c;很详细&#xff1a;Ubuntu 20.04 安装 VMwareTools 教程 2、实现主机与VMware虚拟机共享文件夹 设置共享文件夹参考&#xff1a;windows和虚拟机互传文件的三种方式 挂载操作参考&#xff1a;主机与VMware虚拟机共享文件夹&…...

3D场景重建与实时渲染:XV3DGS-UEPlugin技术指南

3D场景重建与实时渲染&#xff1a;XV3DGS-UEPlugin技术指南 【免费下载链接】XScene-UEPlugin 项目地址: https://gitcode.com/gh_mirrors/xv/XScene-UEPlugin XV3DGS-UEPlugin是由XVERSE Technology Inc.开发的基于Unreal Engine 5的混合编辑插件&#xff0c;提供Gaus…...

从串口通信到内存总线:手把手拆解‘波特率’、‘比特率’与‘总线带宽’的异同与实战计算

从串口通信到内存总线&#xff1a;深度解析波特率、比特率与总线带宽的实战差异 在嵌入式开发和计算机体系结构领域&#xff0c;数据传输速率的计算是工程师日常工作中无法绕开的基础技能。但令人困惑的是&#xff0c;同样的"速率"概念在不同场景下却有着完全不同的…...

Wan2.2-I2V-A14B文生视频入门必看:WebUI可视化操作+命令行示例详解

Wan2.2-I2V-A14B文生视频入门必看&#xff1a;WebUI可视化操作命令行示例详解 1. 快速了解Wan2.2-I2V-A14B Wan2.2-I2V-A14B是一款强大的文生视频模型&#xff0c;能够根据文本描述生成高质量视频内容。这个私有部署镜像专为RTX 4090D 24GB显存显卡优化&#xff0c;内置完整运…...

AT25SF041 SPI Flash驱动设计与嵌入式可靠性实践

1. AT25SF041 SPI Flash 存储器驱动深度解析AT25SF041 是由 Adesto&#xff08;现为 Dialog Semiconductor&#xff09;推出的 4 Mbit&#xff08;512 KB&#xff09;串行 NOR Flash 存储器&#xff0c;采用标准四线 SPI 接口&#xff08;CLK、CS#、DI、DO&#xff09;&#xf…...

国产数据库新选择:SpringBoot集成KingbaseES的性能优化全攻略

SpringBoot集成KingbaseES性能调优实战指南 当企业级应用遇到国产数据库新贵KingbaseES&#xff0c;性能优化便成为开发者最关心的核心议题。作为一款兼容PostgreSQL协议的高性能国产数据库&#xff0c;KingbaseES在金融、政务等关键领域展现出越来越强的竞争力。但要让SpringB…...

用MATLAB从零实现六足机器人步态:交替三角与波动步态代码详解

用MATLAB从零实现六足机器人步态&#xff1a;交替三角与波动步态代码详解 六足机器人因其卓越的稳定性和地形适应能力&#xff0c;在野外勘探、灾难救援等领域展现出巨大潜力。而步态规划作为机器人运动控制的核心&#xff0c;直接决定了机器人的移动效率和稳定性。本文将带您从…...

22:L应用区块链+AI:蓝队的分布式安全

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-19 主要来源平台&#xff1a; GitHub 摘要&#xff1a; 区块链的不可篡改特性与AI的智能分析能力相结合&#xff0c;为蓝队防御带来了新的可能性。L深入研究区块链AI的融合应用&#xff0c;构建了一个分布式、透明、…...

OpenClaw多用户方案:QwQ-32B共享环境下的权限隔离

OpenClaw多用户方案&#xff1a;QwQ-32B共享环境下的权限隔离 1. 为什么需要多用户方案&#xff1f; 去年我在家里搭建了一个OpenClaw自动化环境&#xff0c;原本只是个人使用。直到某天家人看到我用语音指令让AI自动整理照片、生成周报后&#xff0c;纷纷要求"共享&quo…...

ElasticSearch查询集群及设置

Elasticsearch查询集群API示例 查看集群状态及监控 参考资料 https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-health.html https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-nodes-stats.html 查看集群状态 健康状态 curl -XGE…...

基于pso-LSTM的锂电池SOH健康状态预测模型(NASA数据集)B0005、B0006、B...

基于pso-LSTM的锂电池SOH健康状态预测模型&#xff08;NASA数据集&#xff09;B0005、B0006、B0007、B0008四个电池数据集。 在数据预处理阶段&#xff0c;用户可以自行完成SOH&#xff08;State of Health&#xff09;的计算&#xff0c;然后通过pso-LSTM神经网络进行预测。 该…...