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

[Vue]跨组件传值

news 来源：原创 2025/7/1 10:19:07

父子组件传值

详情可以看文章

跨组件传值

Vue 的核⼼是单向数据流。所以在父子组件间传值的时候，数据通常是通过属性从⽗组件向⼦组件，⽽⼦组件通过事件将数据传递回⽗组件。多层嵌套场景⼀般使⽤链式传递的⽅式实现provide+inject的⽅式适⽤于需要跨层级共享数据的场景，但需要注意不要滥⽤。如果组件层级较深，且需要在多个组件之间共享状态，可以使⽤ Vuex 或 Pinia 等状态管理⼯具。

多层嵌套传值：

现在有三个组件，也就是爷爷、爸爸、儿子三个组件。

1.在父组件中使用provide，传递需要传递的数据。格式:provide('该数据的唯一标识名',数据)

2.在子组件中使用inject,接收传递来的数据。格式:const obj = inject('该数据的唯一标识名')

<!--App.vue-->
<script setup>
import {provide, ref} from "vue";import mymiddle from './middle.vue'const myobj = ref({name: "John",email: "john@gmail.com"})provide("objId", myobj)</script>
<template><p>我是爷爷组件</p><mymiddle></mymiddle>
</template><style scoped>
</style><!--middle.vue-->
<script setup>
import foot from './foot.vue'
</script><template><p>我是爸爸组件</p><foot></foot>
</template><!--foot.vue-->
<script setup>
import {inject, ref} from "vue";const getobj = inject("objId")</script><template><p>我是儿子组件</p><p>接收的数据:{{getobj}}</p>
</template>

注意，这个模式只能用在多层嵌套中，由祖辈往下传，不能下往上传。同样的，同级之间也不能直接传。

跨组件传函数

传递操作与传递值一样。有一点需要注意：函数传递给后辈组件之后，在后辈组件中触发，执行的对象不会变。例如该函数是给原组件中的num的值+1，那么传递给后辈组件并在其中触发，修改的还是原组件中的num的值。

[Vue]跨组件传值

父子组件传值详情可以看文章跨组件传值 Vue 的核⼼是单向数据流。所以在父子组件间传值的时候，数据通常是通过属性从⽗组件向⼦组件，⽽⼦组件通过事件将数据传递回⽗组件。多层嵌套场景⼀般使⽤链式传递的⽅式实现provideinject的⽅式适⽤于需要跨层级…...

编程日记 2025/7/1 10:19:07

Cross-Mix Monitoring for Medical Image Segmentation With Limited Supervision

ζ \zeta ζ is the hyperparameter that controls the mixture rate， u ^ m \hat{u}_m u^m是mixed version 作者未提供代码...

编程日记 2025/7/1 9:50:45

采用线性优化改进评估配电网的灵活性范围

1引言在本文中，柔性一词被定义为“响应外部信号对发电或消耗的修正”。文章组织结构如下：第二节介绍了代表典型柔性配电网资源技术局限性的线性模型；在第三节中建立了一个线性优化问题；第四节提出了聚合算法；第五节评…...

编程日记 2025/7/1 10:16:12

用户缓冲区

1. 基本概念 1.1 用户空间与内核空间用户空间（User Space）：用户应用程序运行的内存空间，具有较低的权限，无法直接访问硬件和内核数据结构。内核空间（Kernel Space）：操作系统内核运…...

编程日记 2025/7/1 8:59:14

1.4 C++之运算符与表达式

运算符与表达式教程目标掌握算术运算符（, -, *, /）和逻辑运算符（&&, ||, !）。理解表达式优先级规则。实现一个简单计算器程序。一、算术运算符：像数学课上的加减乘除 1. 四种基本运算加法（…...

编程日记 2025/7/1 8:34:36

目标检测基础知识

如今，使用最新的驾驶辅助技术（如车道检测、盲点、交通信号灯等）驾驶汽车已经很常见。如果我们退后一步来了解幕后发生的事情，我们的数据科学家很快就会意识到系统不仅对对象进行分类，而且还在场景中（实时…...

编程日记 2025/7/1 9:23:54

实时监控服务器CPU、内存和磁盘使用率

实时监控服务器CPU、内存和磁盘使用率监控内存使用率： free -g | awk NR2{printf "%.2f%%\t\t", $3*100/$2 }awk NR2{...} 取第二行（Mem 行）。 $3 为已用内存，$2 为总内存，$3*100/$2 即计算使用率。监控磁…...

编程日记 2025/7/1 8:06:58

前端JavaScript-嵌套事件

点击如果在多层嵌套中，对每层都设置事件监视器，试试看 <!DOCTYPE html> <html lang"cn"> <body><div id"container"><button>点我！</button></div><pre id"output…...

编程日记 2025/7/1 9:33:22

【ULR #1】打击复读（SAM， DAG链剖分）

好牛的题。 DAG链剖分好牛的 trick。题意给定一个字符集大小为 4 4 4，长度为 n n n 的字符串 S S S，同时给定两个长度为 n n n 的数组 { w l i } , { w r i } \{wl_i\}, \{wr_i\} {wli},{wri}。定义一个字符串 T T T 的左权值为 v l ( T…...

编程日记 2025/7/1 9:16:42

Web3 领域中的一些专业术语

1. Uniswap 是什么： Uniswap 是一个去中心化的交易所，运行在以太坊区块链上，相当于一个“无人管理的货币兑换市场”。它允许用户直接用加密钱包（如 MetaMask）交换不同类型的数字货币（称为代币）…...

编程日记 2025/7/1 1:25:35

Vue组件通信方式及最佳实践

1. Props / 自定义事件 (父子通信) 使用场景父子组件直接数据传递代码实现  <template><Child :message"parentMsg" update"handleUpdate" /> </template><script setup> import { ref } from vue…...

编程日记 2025/7/1 8:56:04

JUC并发编程（下）

五、共享模型之内存 JMM（java内存模型） 主存：所有线程共享的数据（静态成员变量、成员变量） 工作内存：每个线程私有的数据（局部变量） 简化对底层的控制可见性问题线程t通过r…...

编程日记 2025/7/1 8:20:35

Go语言中new与make的深度解析

在 Go 语言中，new 和 make 是两个用于内存分配的内置函数，但它们的作用和使用场景有显著区别。理解它们的核心在于： new(T): 为类型 T 分配内存，并将其初始化为零值，然后返回一个指向该内存的指针 (*T)。make(T, ar…...

编程日记 2025/7/1 9:13:22

Xilinx 7Series\UltraScale 在线升级FLASH STARTUPE2和STARTUPE3使用

一、FPGA 在线升级 FPGA 在线升级FLASH时，一般是通过逻辑生成SPI接口操作FLASH，当然也可以通过其他SOC经FPGA操作FLASH，那么FPGA就要实现在启动后对FLASH的控制。对于7Series FPGA，只有CCLK是专用引脚，SPI接口均为普…...

编程日记 2025/7/1 8:37:08

redisson-spring-boot-starter 版本选择

以下是更详细的 Spring Boot 与 redisson-spring-boot-starter 版本对应关系，按照 Spring Boot 主版本和子版本细分： 1. Spring Boot 3.x 系列 3.2.x 推荐 Redisson 版本：3.23.1（最新稳定版，兼容 Redis 7.x&#xf…...

编程日记 2025/7/1 9:42:50

QML定时器Timer和线程任务WorkerScript

定时器 Timer 属性 interval: 事件间隔毫秒repeat: 多次执行，默认只执行一次running: 定时器启动triggeredOnStart: 定时器启动时立刻触发一次事件信号 triggered(): 定时时间到，触发此信号方法 restart(): 重启定时器start(): 启动定时器stop(): 停止…...

编程日记 2025/7/1 8:10:33

Jsoup解析商品信息具体怎么写？

使用 Jsoup 解析商品信息是一个常见的任务，尤其是在爬取电商网站的商品详情时。以下是一个详细的步骤和代码示例，展示如何使用 Jsoup 解析商品信息。一、准备工作确保你的项目中已经添加了 Jsoup 依赖。如果你使用的是 Maven，可以在 pom.…...

编程日记 2025/7/1 9:17:32

jenkins数据备份

jenkins数据备份一般情况下分为两种, 1.使用crontab进行备份.这种备份方式是技术人员手动填写的备份的时候将workspace目录排除. 2.使用jenkins插件备份. 下载备份插件 ThinBackup,这里已经下载完成,如果没下载的情况下点击安装好之后重启jenkins(直接点击插件安装位置的闲…...

编程日记 2025/6/30 10:54:39

IP核警告，Bus Interface ‘AD_clk‘: ASSOCIATED_BUSIF bus parameter is missing.

创建IP核生成输出的clk信号无法在GUI（customization GUI）显示clk信号，并且出现如下2个warning： [IP_Flow 19-3153] Bus Interface AD_clk: ASSOCIATED_BUSIF bus parameter is missing. [IP_Flow 19-4751] Bus Interface AD_clk:…...

编程日记 2025/7/1 8:09:43

Nginx配置同一端口不同域名或同一IP不同端口

以下是如何在Nginx中配置同一端口不同域名，以及同一IP不同端口的详细说明： 一、同一端口不同域名（基于名称的虚拟主机） 场景： 通过80端口，让 example.com 和 test.com 指向不同的网站目录（如 /…...

编程日记 2025/7/1 8:30:10

一键启动多个 Chrome 实例并自动清理的 Bash 脚本分享！

目录一、📦 脚本功能概览二、📜 脚本代码一览三、🔍 脚本功能说明 （一）✅ 支持批量启动多个 Chrome 实例 （二）✅ 每个实例使用独立用户数据目录 （三）✅ 启动后自…...

编程日记 2025/7/1 9:22:12

LLaMA-Adapter

一、技术背景与问题 1.1 传统方法的数学局限二、LLaMA-Adapter 核心技术细节 2.1 Learnable Adaption Prompts 的设计哲学这种零初始化注意力机制的目的是在训练初期稳定梯度，避免由于随机初始化的适配提示带来的不稳定因素。通过门控因子gl的自适应调整，在训…...

编程日记 2025/7/1 9:50:47

鸿蒙电脑系统和统信UOS都是自主可控的系统吗

鸿蒙电脑系统（HarmonyOS）和统信UOS（Unity Operating System）均被定位为自主可控的操作系统，但两者的技术背景、研发路径和生态成熟度存在差异，需结合具体定义和实际情况分析： 1. 鸿蒙系统&#…...

编程日记 2025/7/1 9:30:47

【Unity 如何使用 Mixamo下载免费模型/动画资源】Mixamo 结合在 Unity 中的实现（Animtor动画系统，完整配置以及效果展示）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Mixamo介绍1、网址2、Mixamo功能介绍Mixamo 的核心功能Mixamo 适用场景二、Mixamo下载免费模型三、Mixamo下载免费动画四、导入Unity1.人物模型配置2.动画配置五、场景配置和效果测试1.人物…...

编程日记 2025/7/1 9:39:44

linux文件重命名命令

Linux文件重命名指南方法一：mv命令（单文件操作） mv 原文件名新文件名基础用法示例： mv old_file.txt new_name.txt保留扩展名技巧： mv document-v1.doc document-v2.doc方法二：rename命令&#xff08…...

编程日记 2025/7/1 8:59:14

JavaScript-DOM-02

自定义属性： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...

编程日记 2025/7/1 9:57:04

跨部门项目管理优化：告别邮件依赖

1. 工具整合 1.1 协作平台集中化 1.1.1 一体化协作工具优势使用Microsoft Teams、Slack等一体化协作工具替代邮件，集成即时消息、文件共享、任务分配和视频会议功能，减少工具切换成本，提高沟通效率。 1.1.2 具体应用案例在Teams中创建项目频道，关联任务看板（Planner）…...

编程日记 2025/7/1 9:14:21

ADB常用语句

目录基本语句 pm 包管理操作查看文件夹内容查看文件内容删除文件 dumpsys查看系统服务状态 logcat保存日志日志级别基本语句查看是否安装成功 adb version查看是否连接成功 adb devices断开连接 adb disconnect进入安卓系统 adb shell 退出安卓系统 exit…...

编程日记 2025/7/1 8:39:00

阿里发布扩散模型Wan VACE，全面支持生图、生视频、图像编辑，适配低显存～

项目背景详述推出与目的 Wan2.1-VACE 于 2025 年 5 月 14 日发布，作为一个综合模型，旨在统一视频生成和编辑任务。其目标是解决视频处理中的关键挑战，即在时间和空间维度上保持一致性。该模型支持多种任务，包括参考到视频生成&a…...

编程日记 2025/7/1 9:00:01

谷歌开源轻量级多模态文本生成模型：gemma-3n-E4B-it-litert-preview

一、Gemma 3n模型概述 1.1 模型简介 Gemma 3n是Google DeepMind开发的一系列轻量级、最先进的开源模型。这些模型基于与Gemini模型相同的研究和技术构建，适合多种内容理解任务，如问答、摘要和推理等。 1.2 模型特点 Gemma 3n模型专为在资源受限设备上…...

编程日记 2025/7/1 1:24:01

【Linux】了解消息队列 system V信号量 IPC原理

🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录一、了解消息队列 ✨消息队列函数 🍔ftok() --- 系统调用设置key 🍔 msgget() 🍔msgctl() 🍔msgsnd() ✨消息队列的管理指令二、了…...

编程日记 2025/7/1 8:48:31

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡今天有朋友问我：“为什么 git clone 下载文件这么快？而我在本地复制粘贴文件时，速度却慢得多？” 这个问题很有意思，因为它涉及…...

编程日记 2025/7/1 9:40:55

高级认知型Agent

目标：构建一个具备自主规划、多步推理、工具使用、自我反思和环境交互能力的智能代理，使其能够高效、可靠地完成复杂任务。核心理念： Agent的智能涌现于一个精密的认知循环：感知 (Perceive) -> 理解与规划 (Think/Plan - 想) -> 信息获取 (Search/Act - 查) -&g…...

编程日记 2025/7/1 4:20:20

网络爬虫（Web Crawler）详解

网络爬虫（Web Crawler）详解 1. 基本概念与核心目标定义：网络爬虫是一种自动化的程序，通过HTTP协议访问网页，提取并存储数据（如文本、链接、图片），并根据策略递归访问新链接。核心目标：数据采集：抓取特定网站或全网公开数据。索引构建：为搜索引擎提供页面内容（如…...

编程日记 2025/7/1 10:01:20

SQL 数值计算全解析：ABS、CEIL、FLOOR与ROUND函数深度精讲

一、问题拆解：数值计算需求分析 1.1 业务需求转换题目：在numbers表中计算每个数值的绝对值、向上取整、向下取整和四舍五入值。关键分析点： 需要对同一字段进行四种不同的数学运算每种运算对应一个特定的SQL数学函数需保持原始数据完整…...

编程日记 2025/7/1 9:57:03

智能导览系统多语言解说与AI问答功能：从deepseek到景区知识图谱的构建

本文面向文旅行业技术决策者、GIS 开发者、AI 算法工程师，旨在解决不够智能化导致游客体验不足的核心痛点，提供从技术选型到落地部署的全链路解决方案。如需获取智慧景区导览系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私…...

编程日记 2025/7/1 8:07:37

10.18 LangChain ToolMessage实战：多轮交互与状态管理全解析

使用 ToolMessage 管理工具调用输出关键词：LangChain ToolMessage, 工具调用管理, 多轮交互控制, 状态持久化, 输出解析 1. ToolMessage 的定位与价值在 LangChain v0.3 的 Agent 工作流中，ToolMessage 是专门用于管理工具调用输出的消息类型，主要解决以下核心问题： #m…...

编程日记 2025/7/1 9:14:18

linux基础操作11------（运行级别）

一.前言这个是linux最后一章节内容，主要还是介绍一下，这个就和安全有关系了，内容还是很多的，但是呢，大家还是做个了解就好了。二.权限掩码运行级别 0 关机运行级别 1 单用户 ，这个类似于windows安全…...

编程日记 2025/7/1 8:16:27

Python Ray 扩展指南

Python Ray 扩展指南 Ray 是一个开源的分布式计算框架，专为扩展 Python 应用程序而设计，尤其在人工智能和机器学习领域表现出色。它提供了简单的 API，使开发者能够轻松编写并行和分布式代码，而无需关注底层复杂性。以下是关于 Py…...

编程日记 2025/7/1 7:48:25

笑林广记读书笔记三

《锯箭杆》一人往观武场，飞箭误中其臂。请外科医治疗，医遂用小锯截其外露箭杆，即索谢礼。问：“内截箭头如何？” 医曰：“此是内科的事，你去找他们。” 白话翻译： 有…...

编程日记 2025/7/1 9:38:07

npm、pnpm、yarn 各自优劣深度剖析

在前端开发领域，包管理工具是开发者的得力助手，它们负责处理项目中的依赖安装、更新与管理。npm、pnpm、yarn 是目前最主流的三款包管理工具，它们在功能上有诸多相似之处，但在实际使用中又各有优劣。本文将结合包管理工具常见问题…...

编程日记 2025/7/1 9:17:31

Ulisses Braga-Neto《模式识别和机器学习基础》

模式识别和机器学习基础 [专著] Fundamentals of pattern recognition and machine learning / (美)乌利塞斯布拉加－内托(Ulisses Braga-Neto)著 ; 潘巍[等]译推荐这本书，作者有自己的见解，而且提供代码。问题是难度高，对于初学…...

编程日记 2025/6/27 22:51:31

python查询elasticsearch 获取指定字段的值的list

from elasticsearch import Elasticsearch from datetime import datetime, timedelta# 1.connect to Elasticsearch------------------------------------------------------------------------------------------------------ # prod连接到 Elasticsearch es_of_prod Elasti…...

编程日记 2025/6/27 23:35:32

父子组件传值

跨组件传值

跨组件传函数

相关文章：