【前端】【面试】【经典一道题】vue中组件传值的几种方式
父子组件传值
1. 父传子:props
这是最常见的父组件向子组件传递数据的方式。父组件在使用子组件时,通过在子组件标签上绑定属性来传递数据,子组件通过 props
选项接收这些数据。
<!-- 父组件 -->
<template><div><ChildComponent :parentMsg="message" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const message = ref('来自父组件的消息');
</script><!-- 子组件 ChildComponent.vue -->
<template><div><p>{{ parentMsg }}</p></div>
</template><script setup>
const props = defineProps({parentMsg: {type: String,required: true}
});
</script>
2. 子传父:$emit(自定义事件)
子组件可以通过 $emit
触发自定义事件,并将数据作为参数传递给父组件,父组件监听这些自定义事件来接收数据。
<!-- 子组件 ChildComponent.vue -->
<template><div><button @click="sendDataToParent">发送数据给父组件</button></div>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['childEvent']);const sendDataToParent = () => {const data = '来自子组件的数据';emit('childEvent', data);
};
</script><!-- 父组件 -->
<template><div><ChildComponent @childEvent="handleChildEvent" /><p>{{ receivedData }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const receivedData = ref('');const handleChildEvent = (data) => {receivedData.value = data;
};
</script>
3. 父子双向绑定:v-model
v-model
是一种语法糖,结合了 props
和 $emit
,可以实现父组件和子组件之间的双向数据绑定。
<!-- 子组件 ChildComponent.vue -->
<template><div><input v-model="modelValue" @input="updateValue"></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue';const props = defineProps({modelValue: String
});const emit = defineEmits(['update:modelValue']);const updateValue = (event) => {emit('update:modelValue', event.target.value);
};
</script><!-- 父组件 -->
<template><div><ChildComponent v-model="parentValue" /><p>{{ parentValue }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentValue = ref('初始值');
</script>
兄弟组件传值
1. 事件总线(适用于小型项目)
事件总线是一个全局的事件发射器,兄弟组件可以通过它来发布和订阅事件,从而实现数据传递。在 Vue 3 中,可使用 mitt
库来实现事件总线。
// eventBus.js
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;
<!-- 发送数据的兄弟组件 -->
<template><div><button @click="sendData">发送数据</button></div>
</template><script setup>
import eventBus from './eventBus.js';const sendData = () => {const data = '来自兄弟组件的数据';eventBus.emit('brotherEvent', data);
};
</script><!-- 接收数据的兄弟组件 -->
<template><div><p>{{ receivedData }}</p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import eventBus from './eventBus.js';const receivedData = ref('');const handleEvent = (data) => {receivedData.value = data;
};onMounted(() => {eventBus.on('brotherEvent', handleEvent);
});onUnmounted(() => {eventBus.off('brotherEvent', handleEvent);
});
</script>
2. 状态管理库(适用于大型项目)
使用状态管理库(如 Vuex 或 Pinia),可以将共享数据存储在一个集中的位置,兄弟组件可以从中获取和修改数据。
// stores/counter.js (Pinia 示例)
import { defineStore } from 'pinia';export const useSharedStore = defineStore('shared', {state: () => ({sharedData: '初始共享数据'}),actions: {updateSharedData(newData) {this.sharedData = newData;}}
});
<!-- 发送数据的兄弟组件 -->
<template><div><button @click="updateData">更新共享数据</button></div>
</template><script setup>
import { useSharedStore } from '../stores/counter';const sharedStore = useSharedStore();const updateData = () => {sharedStore.updateSharedData('新的共享数据');
};
</script><!-- 接收数据的兄弟组件 -->
<template><div><p>{{ sharedStore.sharedData }}</p></div>
</template><script setup>
import { useSharedStore } from '../stores/counter';const sharedStore = useSharedStore();
</script>
3. localStorage
localStorage
是浏览器提供的一种本地存储机制,可以在不同组件之间共享数据。一个组件将数据存储到 localStorage
中,另一个组件可以从 localStorage
中读取数据。
<!-- 发送数据的兄弟组件 -->
<template><div><button @click="saveDataToLocalStorage">保存数据到 localStorage</button></div>
</template><script setup>
const saveDataToLocalStorage = () => {const data = '通过 localStorage 传递的数据';localStorage.setItem('sharedData', data);
};
</script><!-- 接收数据的兄弟组件 -->
<template><div><p>{{ receivedData }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';const receivedData = ref('');onMounted(() => {const data = localStorage.getItem('sharedData');if (data) {receivedData.value = data;}
});
</script>
跨层级组件传值
1. provide/inject
provide
和 inject
用于实现跨层级的组件数据传递。祖先组件通过 provide
提供数据,后代组件通过 inject
注入这些数据。
<!-- 祖先组件 -->
<template><div><ChildComponent /></div>
</template><script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const sharedData = ref('来自祖先组件的共享数据');
provide('sharedData', sharedData);
</script><!-- 后代组件(可以是多层嵌套) -->
<template><div><p>{{ injectedData }}</p></div>
</template><script setup>
import { inject } from 'vue';const injectedData = inject('sharedData');
</script>
2. 状态管理库
和兄弟组件传值类似,使用状态管理库(如 Vuex 或 Pinia)可以方便地实现跨层级组件之间的数据共享和传递。所有组件都可以访问和修改存储在状态管理库中的数据。
3. 路由传值
在 Vue Router 中,可以通过路由参数或查询参数来传递数据。这种方式适用于在路由跳转时传递数据给目标组件。
路由参数
// 路由配置
import { createRouter, createWebHistory } from 'vue-router';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';const routes = [{path: '/componentB/:id',name: 'ComponentB',component: ComponentB},{path: '/componentA',name: 'ComponentA',component: ComponentA}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
<!-- 发送数据的组件 ComponentA.vue -->
<template><div><router-link :to="{ name: 'ComponentB', params: { id: 123 } }">跳转到 ComponentB 并传参</router-link></div>
</template><script setup></script><!-- 接收数据的组件 ComponentB.vue -->
<template><div><p>接收到的参数 id: {{ $route.params.id }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';const route = useRoute();
</script>
查询参数
<!-- 发送数据的组件 ComponentA.vue -->
<template><div><router-link :to="{ name: 'ComponentB', query: { message: 'Hello from ComponentA' } }">跳转到 ComponentB 并传参</router-link></div>
</template><script setup></script><!-- 接收数据的组件 ComponentB.vue -->
<template><div><p>接收到的查询参数 message: {{ $route.query.message }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';const route = useRoute();
</script>
相关文章:
【前端】【面试】【经典一道题】vue中组件传值的几种方式
父子组件传值 1. 父传子:props 这是最常见的父组件向子组件传递数据的方式。父组件在使用子组件时,通过在子组件标签上绑定属性来传递数据,子组件通过 props 选项接收这些数据。 <!-- 父组件 --> <template><div><Ch…...
SwiftUI 中 .overlay 两种写法的区别及拓展
SwiftUI 中 .overlay 两种写法的区别及拓展 一、.overlay 简介功能语法 二、写法 1:.overlay(Circle().stroke(Color.blue, lineWidth: 2))代码示例解释优点适用场景 三、写法 2:.overlay { Circle().stroke(.white, lineWidth: 4) }代码示例解释优点适用…...
简述mysql 主从复制原理及其工作过程,配置一主两从并验证
原理: MySQL主从复制是基于事件的复制机制。主服务器负责处理所有的写操作和事务,并将这些更改(如INSERT、UPDATE和DELETE)以事件的形式记录到二进制日志(binlog)中。从服务器则通过读取主服务器的二进制日…...
python-leetcode 25.环形链表
题目: 给定一个链表的头节点head,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪next指针再次到达,则链表中存在环。为了表示给定链表中的环,评测系统内部使用整数pos来表示链表尾连接到链表中的位置(…...
游戏引擎学习第98天
仓库:https://gitee.com/mrxiao_com/2d_game_2 开始进行一点回顾 今天的目标是继续实现正常贴图的操作,尽管目前我们还没有足够的光照信息来使其完全有用。昨日完成了正常贴图相关的基础工作,接下来将集中精力实现正常贴图的基本操作,并准备…...
机器学习 - 进一步理解最大似然估计和高斯分布的关系
一、高斯分布得到的是一个概率吗? 高斯分布(也称为正态分布)描述的是随机变量在某范围内取值的概率分布情况。其概率密度函数(PDF)为: 其中,μ 是均值,σ 是标准差。 需要注意的是…...
物联网水质监测系统设计与实现/基于STM32的水产养殖云监控系统设计
背景 随着物联网技术的飞速发展,各行各业都在逐步实现智能化管理,水质监测系统作为环境监测中的一个重要环节,近年来备受关注。如何高效、精准地监测水质,尤其是在远程无法到达的地方,成为了一个迫切需要解决的问题。…...
【学习笔记】计算机网络(三)
第3章 数据链路层 文章目录 第3章 数据链路层3.1数据链路层的几个共同问题3.1.1 数据链路和帧3.1.2 三个基本功能3.1.3 其他功能 - 滑动窗口机制 3.2 点对点协议PPP(Point-to-Point Protocol)3.2.1 PPP 协议的特点3.2.2 PPP协议的帧格式3.2.3 PPP 协议的工作状态 3.3 使用广播信…...
Android 系统面试问题
一.android gki和非gki的区别 Android GKI(Generic Kernel Image)和非GKI内核的主要区别在于内核设计和模块化程度,具体如下: 1. 内核设计 GKI:采用通用内核设计,与设备硬件分离,核心功能统一…...
大疆无人机二次开发调试准备
以下机场和遥控器模式只能同时支持一种,因为无人机只能同时对频一种设备,如果同时对频了两种,以最后对频设备为准 机场模式 保证机场的网口闪烁,网络正常在mqtt中给dock建立用户,配置新建的MQTT账号和密码。组织ID任…...
【嵌入式Linux应用开发基础】文件I/O基础编程
目录 一、文件I/O简介 二、文件描述符 2.1. 唯一性 2.2. 抽象性 2.3. 有限性 三、文件操作函数 四、标准文件I/O函数 五、文件执行权限 5.1. 权限类型 5.2. 权限分配对象 5.3. 权限表示方法 5.4. 权限设置命令 5.5. 权限设置的重要性 5.6. 实例说明 六、设备文件…...
【StableDiffusion容器化部署】分步指南
使用Docker部署和管理Stable Diffusion环境可以有效解决依赖冲突、环境隔离和可移植性问题。以下是分步指南和相关技术细节: 1. 基础环境准备 1.1 安装Docker和GPU支持 安装Docker Engine:参考官方文档配置NVIDIA Container Toolkit:# 安装…...
2.11 sqlite3数据库【数据库的相关操作指令、函数】
练习: 将 epoll 服务器 客户端拿来用 客户端:写一个界面,里面有注册登录 服务器:处理注册和登录逻辑,注册的话将注册的账号密码写入数据库,登录的话查询数据库中是否存在账号,并验证密码是否正确…...
安装 Ollama 需要哪些步骤?(windows+mac+linux+二进制+Docker)
安装 Ollama 的步骤根据操作系统不同会有所差异,以下是针对不同操作系统的详细安装指南: Windows 系统 下载安装包:访问 Ollama 官方下载页面,下载适用于 Windows 的安装程序 OllamaSetup.exe。运行安装程序:双击下载的安装包,按照提示完成安装。默认安装路径为 C:\User…...
【力扣】148.排序链表
AC截图 题目 思路 基本情况处理: 如果链表为空 (head NULL) 或者链表仅有一个节点 (head->next NULL),则链表已经是有序的,直接返回头节点 head。 分割链表: 使用快慢指针法找到链表的中间节点。slow 指针每次前进一格&…...
Springboot框架扩展功能的使用
Spring Boot 提供了许多扩展点,允许开发者在应用程序的生命周期中插入自定义逻辑。这些扩展点可以帮助你更好地控制应用程序的行为,例如在启动时初始化数据、在关闭时释放资源、或者自定义配置加载逻辑。以下是 Spring Boot 中常见的扩展点: …...
绿虫储能仿真软件解决储能项目中的哪些痛点
痛点一:储能方案定制难 如何根据不同用户的需求,制定科学合理的储能方案,一直是行业内的一大难题。每个用户的用电情况、场地条件、预算等都存在差异,想要实现 “千人千面” 的专属方案设计谈何容易。 绿虫储能仿真设计软件凭借…...
保姆级教程Docker部署Zookeeper镜像
目录 一、安装Docker及可视化工具 二、创建Zookeeper网络 三、镜像选择 四、单节点部署 1、创建挂载目录 2、命令运行容器 3、Compose运行容器 4、查看运行状态 5、验证是否正常运行 一、安装Docker及可视化工具 Docker及可视化工具的安装可参考:Ubuntu上…...
【leetcode】滑动窗口刷题总结
滑动窗口算法技巧主要用来解决子数组问题,比如让你寻找符合某个条件的最长/最短子数组或者子串。对于某些题目,并不需要穷举所有子串,就能找到题目想要的答案。滑动窗口就是这种场景下的一套算法模板,帮你对穷举过程进行剪枝优化&…...
【MySQL】通过shell脚本一键同步MySQL数据库结构和数据到指定库中
通过shell脚本对数据库进行覆盖式备份/迁移,简单方便,适合需要快速同步某个库结构和数据到目标库的场景。 通过AI调试了好些次得到能用的脚本,本文主要是做一个对该脚本的记录| 安装依赖 # 安装进度条库 sudo apt install pv注:如…...
C# COM 组件在.NET 平台上的编程介绍
.NET学习资料 .NET学习资料 .NET学习资料 一、COM 组件简介 COM(Component Object Model)即组件对象模型,是一种微软提出的软件组件技术,它允许不同的软件模块在二进制层面进行交互。COM 组件可以用多种编程语言开发࿰…...
数据结构与算法:动态规划dp:背包问题:理论基础(状态压缩/滚动数组)和相关力扣题(416. 分割等和子集、1049.最后一块石头的重量Ⅱ、494.目标和)
背包问题 01背包理论基础 对于01背包问题,物品下标为0到i,对应的重量为weight[0]到weight[i],价值为value[0]到value[i],每个物品只可以取或不取,背包最大容量为j的场景。 常见的状态转移方程如下: dp[i…...
【MySQL例题】我在广州学Mysql 系列——有关数据备份与还原的示例
ℹ️大家好,我是练小杰,今天周二,明天就是元宵节了呀!!😆 俗话说“众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。” 本文主要对数据库备份与还原的知识点例题学习~~ 前情回顾&…...
【Git】完美解决git push报错403
remote: Permission to xx.git denied to xx. fatal: unable to access https://github.com/xx/xx.git/: The requested URL returned error: 403出现这个就是因为你的(personal access tokens )PAT过期了 删掉旧的token 生成一个新的 mac系统 在mac的…...
2021 年 9 月青少年软编等考 C 语言五级真题解析
目录 T1. 问题求解思路分析T2. 抓牛思路分析T3. 交易市场思路分析T4. 泳池思路分析T1. 问题求解 给定一个正整数 N N N,求最小的 M M M 满足比 N N N 大且 M M M 与 N N N 的二进制表示中有相同数目的 1 1 1。 举个例子,假如给定 N N N 为 78 78 78,二进制表示为 …...
玩转适配器模式
文章目录 解决方案现实的举例适用场景实现方式适配器模式优缺点优点:缺点:适配器模式可比上一篇的工厂模式好理解多了,工厂模式要具有抽象的思维。这个适配器模式,正如字面意思,就是要去适配某一件物品。 假如你正在开发一款股票市场监测程序, 它会从不同来源下载 XML 格…...
Batch Normalization (BN) 和 Synchronized Batch Normalization (SyncBN) 的区别
Batch Normalization 和 Synchronized Batch Normalization 的区别 Batch Normalization (BN) 和 Synchronized Batch Normalization (SyncBN) 的区别1. BN(Batch Normalization)2. SyncBN(Synchronized Batch Normalization)3. 选…...
MySQL主从同步
目录 一、MySQL主从同步 1、基于binlog的主从同步 2、基于gtid的主从同步配置 二、MySQL 主从读写分离实现方案 2.1 ProxySQL实现mysql8主从同步读写分离 1、ProxySQL基本介绍 2、ProxySQL结构 2、实验环境 3、实现数据库主从复制 4、安装ProxySQL 5、配置ProxySQL …...
CCFCSP认证考试 ——202403-1 词频统计
题目: 在学习了文本处理后,小 P 对英语书中的 n 篇文章进行了初步整理。 具体来说,小 P 将所有的英文单词都转化为了整数编号。假设这 n 篇文章中共出现了 m 个不同的单词,则把它们从 1 到 m 进行编号。 这样,每篇文章…...
关于“i18n“在vue中的使用
关于"i18n"在vue中的使用 <!-- vue2中 --> <template><div>{{ $t("This campaign has expired.") }}}}</div> </template> <script> export default {created() {this.onLoading();},methods: {onLoading () {this.$…...
MATLAB中count函数用法
目录 语法 说明 示例 对出现次数计数 使用模式对数字和字母进行计数 多个子字符串的所有出现次数 忽略大小写 对字符向量中的子字符串进行计数 count函数的功能是计算字符串中模式的出现次数。 语法 A count(str,pat) A count(str,pat,IgnoreCase,true) 说明 A c…...
Spring中的@Component和@Bean有什么区别?
在Spring框架中,Component和Bean都用于定义Bean,但它们的使用场景和方式有所不同。 ### 1. Component - **作用范围**:Component是一个类级别的注解,通常用于标记一个类为Spring的组件。Spring会自动扫描并注册这些类为Bean。 -…...
泛化、选择、分化
泛化是指记忆联系的“发散”,泛化兴奋的基础是模糊兴奋。记忆联系的“发散”有以下几种种情况: 1、联络区的一原始记忆柱群(A1)具有直接或间接与其它任意联络区的任意原始记忆柱群建立记忆联系的潜力。也就是说任何两个对象&…...
剖析 C++ 模拟算法:数据结构、随机数生成与模型验证
模拟算法 (Simulation Algorithms) 是一种通过计算机程序来模拟现实世界或系统行为的算法。它不依赖于特定的数学公式或优化技术,而是直接按照系统的规则和逻辑进行步骤一步地模拟。 模拟算法的复杂度和效率取决于模拟系统的复杂程度和模拟的精度要求。 在 C 中&…...
51单片机俄罗斯方块整行消除函数
/************************************************************************************************************** * 名称:flash * 功能:行清除动画 * 参数:NULL * 返回:NULL * 备注: * 采用非阻塞延时࿰…...
IDEA升级出现问题Failed to prepare an update Temp directory inside installation
IDEA升级出现问题"Failed to prepare an update Temp directory inside installation…" 问题来源: 之前修改了IDEA的默认配置文件路径,然后升级新版本时就无法升级,提示"Failed to prepare an update Temp directory insid…...
Windows系统下设置Vivado默认版本:让工程文件按需打开
在FPGA开发过程中,我们常常需要在一台电脑上安装多个不同版本的Vivado软件,以满足不同项目的需求。然而,当双击打开一个Vivado工程文件(.xpr)时,系统默认会调用一个固定的版本,这可能并不是我们…...
CSS3+动画
浏览器内核以及其前缀 css标准中各个属性都要经历从草案到推荐的过程,css3中的属性进展都不一样,浏览器厂商在标准尚未明确的情况下提前支持会有风险,浏览器厂商对新属性的支持情况也不同,所有会加厂商前缀加以区分。如果某个属性…...
Kotlin 2.1.0 入门教程(十一)for、while、return、break、continue
for 循环 for 循环会遍历任何提供迭代器的对象。 for (item in collection) print(item)for (int: Int in ints) {println(int) }for 循环会遍历任何提供迭代器的对象,这意味着该对象必须满足以下条件: 具有一个成员函数或扩展函数 iterator()…...
深度探索DeepSeek:成本效益之辩与市场展望
摘要 DeepMind的CEO对DeepSeek的成本效益提出质疑,认为其成本被过度炒作。他指出,DeepSeek所使用的技术大多源自谷歌和DeepMind。然而,分析机构SemiAnalysis强调,DeepSeek的优势在于其成本与能力的卓越组合。尽管目前DeepSeek的成…...
DeepSeek投喂数据(训练AI)
1、拉取nomic-embed-text 打开命令行,运行:ollama pull nomic-embed-text 这里需要先安装ollama ,不过大家应该在本地部署模型时已经安装了 拉取成功就行了,后续在配置AnythingLLM时用到 2、下载 AnythingLLM 地址:…...
Docker 安装与配置 Nginx
摘要 1、本文全面介绍了如何在 Docker 环境中安装和配置 Nginx 容器。 2、文中详细解释了如何设置 HTTPS 安全连接及配置 Nginx 以实现前后端分离的代理服务。 2、同时,探讨了通过 IP 和域名两种方式访问 Nginx 服务的具体配置方法 3、此外,文章还涵…...
常用电路(过压保护、电流/电压采集)
过压保护电路 输入电压使用电源(36V)或者typec(20V),需要过压保护电路处理输入再连接到CH224K,保证输入不高于最大获取电压20V MOS管导通条件为栅源极有压差,一般为5-10V 三极管导通条件为基极…...
12.Python模块:模块中的__all__、模块制作、打包模块、模块安装与使用
在 Python 中,模块是一个包含 Python 代码的文件。模块可以包含函数、类和变量,也可以包括可执行的代码。Python提供了一套强大的模块系统,支持模块的制作、打包、安装和使用。接下来,我们将详细介绍 __all__、模块制作、打包模块…...
Socket通信端口绑定的逻辑实现
在实现网络通信时,一个 Socket 需要维护输入端与输出端的 IP 地址和端口号,同时也需要输入与输出字节缓冲区: 输入端与输出端的 IP 地址和端口号 作用 标识通信端点:IP 地址用于标识网络中的设备,端口号用于标识设备…...
在freertos中,中断优先级和任务优先级之间的关系和使用方法
中断优先级和任务优先级如何匹配?任务优先级不同任务之间该用多高的优先级?中断优先级不同中断中该用多高的优先级?中断优先级和任务优先级设置时,怎样设置可以让任务在调度时屏蔽中断?怎样设置可以让任务在调度时&…...
解锁摄影潜能:全面解析相机镜头的选择与使用逻辑
目录 一、镜头分类:从焦距到用途的底层逻辑 (一)按焦距和视角分类(一级分类) (二)按特殊用途分类(一级分类) 二、参数解码:超越 “光圈越大越好” 的思维定…...
java项目之直销模式下家具工厂自建网站源码(ssm+mysql)
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的直销模式下家具工厂自建网站源码。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 直销模式下家具…...
CNN-BiLSTM卷积神经网络双向长短期记忆神经网络多变量多步预测,光伏功率预测
代码地址:CNN-BiLSTM卷积神经网络双向长短期记忆神经网络多变量多步预测,光伏功率预测 CNN-BiLSTM卷积神经网络双向长短期记忆神经网络多变量多步预测 一、引言 1.1、研究背景和意义 光伏功率预测在现代电力系统中占有至关重要的地位。随着可再生能源…...
grid网格布局中实现父盒子比较大,子元素顶部对齐
css布局中使用grid布局,父盒子的高度是1000px,每个子元素高度是100px,现在有三个子元素,如何实现每行显示两个,并且子元素都顶部对齐?如图所示的效果。 grid布局文档:grid - CSS:层…...