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

组件通信-provide、inject

news 来源：原创 2025/5/8 20:07:48

概述：实现祖孙组件直接通信
具体使用：
- 在祖先组件中通过provide配置向后代组件提供数据
- 在后代组件中通过inject配置来声明接收数据
具体编码：

【第一步】父组件中，使用provide提供数据

父组件：

<template><div class="father"><h3>父组件</h3><h4>资产：{{ money }}</h4><h4>{{ car.brand }}价值：{{ car.price }}</h4><button @click="money += 1">资产+1</button><button @click="car.price += 1">汽车价格+1</button><Child /></div>
</template><script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref, reactive, provide } from "vue";
// 数据
let money = ref(100)
let car = reactive({brand: '奔驰',price: 100
})
// 用于更新money的方法
function updateMoney(value: number) {money.value -= value
}
// 提供数据
provide('moneyContext', { money, updateMoney })
provide('car', car)
</script>
<style scoped>
.father {background-color: pink;width: 200px;height: 400px;padding: 20px;
}button {margin: 5px 0;
}
</style>

子组件：注意：子组件中不用编写任何东西，是不受到任何打扰的

<template><div class="child"><h3>子组件</h3><GrandChild /></div>
</template><script setup lang="ts" name="Child2">
import GrandChild from './GrandChild.vue'
</script>
<style scoped>
.child {background-color: aquamarine;height: 190px;padding: 5px;
}
</style>

孙组件：【第二步】孙组件中使用inject配置项接受数据。

<template><div class="grand-child"><h3>我是孙组件</h3><h4>资产：{{ money }}</h4><h4>{{ car.brand }}价值：{{ car.price }}</h4><button @click="updateMoney(6)">点我花爷爷的钱</button></div>
</template><script setup lang="ts" name="GrandChild">
import { inject } from 'vue';
// 注入数据(解构赋值) 默认值：{ money: 0, updateMoney: (param: number) => { } }
let { money, updateMoney } = inject('moneyContext', { money: 0, updateMoney: (param: number) => { } })
//注入数据 默认值：{ brand: '未知', price: 0 }
let car = inject('car', { brand: '未知', price: 0 })
</script>
<style scoped>
.grand-child {background-color: rgb(173, 148, 232);height: 120px;margin: 10px 0;
}
</style>

组件通信-provide、inject

概述：实现祖孙组件直接通信具体使用： 在祖先组件中通过provide配置向后代组件提供数据在后代组件中通过inject配置来声明接收数据具体编码： 【第一步】父组件中，使用provide提供数据父组件： <template&g…...

编程日记 2025/5/8 20:07:48

定制开发开源AI智能名片S2B2C商城小程序驱动的无界零售基础设施变革研究——基于京东模式的技术解构与商业重构

摘要：本文以京东无界零售战略为参照，探讨定制开发开源AI智能名片S2B2C商城小程序如何通过“技术赋能生态重构”双轮驱动，重塑零售基础设施的可塑化、智能化与协同化。研究显示，该模式通过“AI名片智能中枢S2B2C分布式网络开源技术…...

编程日记 2025/5/3 6:31:05

基于STM32的带恒温系统智能外卖柜设计

标题:基于STM32的带恒温系统智能外卖柜设计内容:1.摘要随着外卖行业的迅速发展，对外卖存放设备的智能化和功能性要求日益提高。本设计的目的是开发一种基于STM32的带恒温系统智能外卖柜。方法上，以STM32微控制器为核心，结合温度传感器、加…...

编程日记 2025/5/8 19:17:58

ARM架构详解：定义、应用及特点

一、ARM架构的定义 ARM（Advanced RISC Machine） 是一种基于精简指令集（RISC）的处理器架构，由ARM公司（现属英伟达）设计，以低功耗、高能效为核心目标。其商业模式为IP授权&#xff0c…...

编程日记 2025/5/3 6:30:03

Spring Boot 集成 Elasticsearch 的详细步骤

以下是 Spring Boot 集成 Elasticsearch 的详细步骤： 环境安装安装 Java ：Elasticsearch 基于 Java，需先安装 JDK 11 或更高版本。从官方网站下载安装包，按教程安装配置，安装后通过命令行输入java -version验证。 …...

编程日记 2025/5/8 19:19:19

提示词版本化管理：AI开发中被忽视的关键环节

当我的提示词"消失"在团队协作中上周五下午，我经历了一场小型"灾难"。作为一名AI产品经理，我花了整整三天精心打磨的客服机器人提示词，在周末更新后突然"失效"了。机器人不再能够准确识别用户意图&#xff0…...

编程日记 2025/5/3 6:30:02

专题二十二：DHCP协议

一、DHCP简介 HCP是Dynamic Host Configuration Protocol的缩写，即动态主机配置协议。DHCP是一个很重要的局域网的网络协议，DHCP使用UDP封装的67和68端口，DHCP客户端使用68端口，DHCP服务器使用67端口进行回应。 DHCP可以提供两种…...

编程日记 2025/5/8 19:56:30

轻量级在线Excel预览工具

轻量级在线Excel预览工具简介在日常工作中，我们经常需要快速查看Excel文件的内容，但不一定总是需要打开完整的Excel软件。为了解决这个问题，我开发了一个轻量级的在线Excel预览工具，让您可以通过浏览器快速查看Excel文件内容。…...

编程日记 2025/5/3 6:28:59

【OFDM过程中正交子载波特性的应用及全面解析】

OFDM过程中正交子载波特性的应用及全面解析一、正交子载波的核心作用正交子载波是OFDM技术的基石，其特性贯穿整个发送和接收流程： 正交性定义子载波频率间隔为符号速率的倒数（ Δ f 1 T \Delta f \frac{1}{T} ΔfT1）&…...

编程日记 2025/5/3 6:28:59

旧版本NotionNext图片失效最小改动解决思路

旧版本NotionNext图片失效最小改动解决思路契机好久没写博客了，最近在notion写博客的时候发现用notionNext同步到个人网站时，图片无法预览。猜测是notion加了防盗链措施，去notionNext官方github上寻找解决方案，需要升级到4.8.…...

编程日记 2025/5/8 19:29:50

4.1. 使用busybox制作文件系统 4.1.1 busybox源码下载： 下载地址：Index of /downloads 4.1.2. busybox源码中修改Makefile ARCH arm CROSS_COMPILE /usr/local/arm/arm-2009q3/bin//arm-none-linux-gnueabi-4.1.3. make menuconfig配置busybox &…...

编程日记 2025/5/8 20:04:26

LeetCode[102]二叉树的层序遍历

思路： 题目描述从左到右一层一层的进行遍历，就遍历二叉树的这种题我更喜欢用递归来做， 我使用java来做的，结果集是两个List集合，那么我们是不是应该每到新的一层就给这个结果集添加一个内部的List，那么怎么…...

编程日记 2025/5/3 6:27:54

【C到Java的深度跃迁：从指针到对象，从过程到生态】第五模块·生态征服篇 —— 第二十章项目实战：从C系统到Java架构的蜕变

一、跨语言重构：用Java重写Redis核心模块 1.1 Redis的C语言基因解析 Redis 6.0源码核心结构： // redis.h typedef struct redisObject { unsigned type:4; // 数据类型（String/List等） unsigned encoding:4; // …...

编程日记 2025/5/8 19:20:50

implement the “pixel-wise difference“

根据在处理图像数据的来源和格式的不同，在具体实现“两幅图像残差比较”的时候，分为两类方法。类型一：PyTorch 的 Tensor 图像格式 imgs_pil_o [transforms.ToPILImage()(img_o) for img_o in imgs_o] imgs_pil_w [transforms.ToPILImag…...

编程日记 2025/5/3 6:26:52

GoogleTest：TEST_F

GoogleTest：简单示例及ASSERT/EXPECT说明-CSDN博客介绍了写一个简单的测试用例如果某些测试用例在开始测试前需要先做一些准备工作，那么如果每次都需要先准备，那么会比较的麻烦，基于这种情况可以使用GoogleTest的TEST_F方法。简单点说，就是需要先定义一个继承于testin…...

编程日记 2025/5/3 6:25:50

【优选算法 | 位运算】位运算基础：深入理解二进制操作

算法相关知识点可以通过点击以下链接进行学习一起加油！双指针滑动窗口二分查找前缀和在本篇文章中，我们将全面解析位运算的基本原理与实际应用。位运算通过直接操作数字的二进制表示，能够在许多计算中提供极大的效率提升。无论是用于加速数学…...

编程日记 2025/5/8 19:59:36

写了个脚本将pdf转markdown

看到有人需要将扫描pdf文档转markdown，想起之前写的一个小工具。这个脚本是为了将pdf转成markdown，只需要申请一个智谱的api key，并填到config里，使用的模型是4v flash，免费的，所以可以放心使用。效果如下…...

编程日记 2025/5/3 6:24:48

Expected SARSA算法详解：python 从零实现

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2025/5/3 6:24:47

SALOME源码分析: JobManager

本文分析SALOME中的JobManager模块。注1：限于研究水平，分析难免不当，欢迎批评指正。注2：文章内容会不定期更新。一、核心组件二、关键流程三、FAQs 网络资料 Introduction: What is the JOBMANAGER ?...

编程日记 2025/5/8 19:36:05

冯·诺依曼体系：现代计算机的底层逻辑与百年传承

在智能手机流畅运行复杂游戏、超级计算机模拟气候变化的今天，很少有人会想到，驱动这些神奇机器运转的核心架构，依然遵循着70多年前提出的设计理念。这就是由匈牙利裔美国科学家约翰冯诺依曼（John von Neumann）奠定的冯…...

编程日记 2025/5/3 6:23:44

10 种微服务设计模式

微服务的优势与挑战在详细介绍设计模式之前，我觉得有必要先重申下微服务的概念以及它带来的挑战。微服务是大型应用程序的一个小型、可独立部署的组件，专注于特定功能。每个微服务都运行自己的进程，通常通过 API 与其他服务进行通信&…...

编程日记 2025/5/3 6:23:44

深入拆解 MinerU 解析处理流程

概述 MinerU更新频率也相当频繁，在短短一个月内，更新了10个小版本。本文结合最新版本v1.3.10，深入拆解下它进行文档解析时的内部操作细节。 MinerU仓库地址：https://github.com/opendatalab/MinerU 环境准备在之前的文章中，已经安装了magic-pdf(MinerU的解析包名)，…...

编程日记 2025/5/8 12:41:27

Nginx部署Vue+ElementPlus应用案例（基于腾讯云）

案例代码链接：https://download.csdn.net/download/ly1h1/90735035 1.参考链接： 基于以下两个链接的参考，创建项目 1.1.基于Vue3前端项目创建-CSDN博客 1.2.基于Vue3引入ElementPlus_vue如何引入elementplus-CSDN博客 2.修改main.js&#…...

编程日记 2025/5/3 6:23:41

设计模式简述（十六）门面模式

门面模式描述基本组件描述门面模式是一种概念相对简单的设计模式。其核心思想就是：封装内部子系统的复杂调用，提供一个门面对象供外部调用。基本组件定义子系统对象（这里做了简化，没有声明抽象） public clas…...

编程日记 2025/5/3 6:22:40

云原生后端：构建高效、可扩展的现代后端架构

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 随着云计算技术的迅猛发展，云原生（Cloud Native）架构已经成为现代软件开发的核心趋势。云原生后端指的是在云环境中构建和部署的后端系统，这些系统具有弹性、可扩展性、自动化运维等特性，能够更…...

编程日记 2025/5/3 6:21:38

基于bert的情感分析程序

文章目录任务介绍数据概览注意事项数据处理代码准备模型构建与训练模型类构建数据集构建数据批处理模型参数查看模型训练结果推理与评估模型推理准确率评估附录任务介绍在当今信息爆炸的时代，互联网上充斥着海量的文本数据，如社交媒体评论、产品评价、新闻报道等。这些文本…...

编程日记 2025/5/3 6:21:37

情境领导理论——AI与思维模型【89】

一、定义情境领导理论思维模型是一种强调领导者应根据下属的成熟度（包括工作能力和工作意愿两个方面）来调整领导风格，以实现有效领导的动态理论。该模型认为，没有一种放之四海而皆准的领导方式，领导者的行为要与下属…...

编程日记 2025/5/3 6:21:36

WPF之ProgressBar控件详解

文章目录 1. ProgressBar控件简介2. ProgressBar的基本属性和用法2.1 基本属性2.2 基本用法2.3 代码中修改进度 3. 确定与不确定模式3.1 确定模式（Determinate）3.2 不确定模式（Indeterminate） 4. 在多线程环境中更新ProgressBar4.…...

编程日记 2025/5/3 6:20:35

计算机网络01-网站数据传输过程

局域网： 覆盖范围小，自己花钱买设备，宽带固定，自己维护，，一般长度不超过100米，，，带宽也比较固定，，，10M，，&…...

编程日记 2025/5/3 6:20:34

泰迪杯特等奖案例学习资料：基于边缘计算与多模态融合的温室传感器故障自诊断系统设计

（第十四届泰迪杯数据挖掘挑战赛A题特等奖案例解析）一、案例背景与核心挑战 1.1 应用场景与行业痛点在现代智能温室中，传感器网络是环境调控的核心依据，但其长期运行面临以下挑战：数据异常频发：传感器老化：温湿度传感器SHT35的精度在连续使用2年后可能漂移1℃。环…...

编程日记 2025/5/3 6:20:33

力扣面试150题--分隔链表

day 39 题目描述思路遍历链表，每一个点与值比较，比值小就继续，比值大就放到链表尾部即可 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int…...

编程日记 2025/5/3 6:20:31

Shell 脚本基础

一、Shell 简介 1.Shell 的定义与作用 Shell，通常被称为命令行解释器 (Command Line Interpreter)，是用户 👤 与 Linux/Unix 操作系统内核进行交互 ↔️ 的“桥梁” 🌉。它扮演着翻译官 🗣️ 的角色： 接…...

编程日记 2025/5/8 19:42:29

【AI面试准备】元宇宙测试：AI+低代码构建虚拟场景压力测试

介绍元宇宙测试：AI低代码构建虚拟场景压力测试（如数字孪生工厂）。如何快速掌握，以及在实际工作中如何运用。目录 **元宇宙测试：AI低代码构建虚拟场景压力测试****一、元宇宙测试的核心挑战与需求**1. **元宇宙测试的独…...

编程日记 2025/5/3 6:19:28

【网络层】之IP协议

网络层之IP协议网络层的作用IP地址不足的问题私网IP和公网IP网段划分传统的网段划分的方法CIDR网段划分路由器的角色理解运营商的角色子网划分的过程路由表IP协议介绍报文如何分离、交付网络层的作用 IP协议是网络层的一种典型协议，只要弄清楚了IP协议的作用&…...

编程日记 2025/5/3 6:19:27

AI编译器对比：TVM vs MLIR vs Triton在大模型部署中的工程选择

引言：大模型部署的编译器博弈随着千亿参数大模型成为常态，推理延迟优化成为系统工程的核心挑战。本文基于NVIDIA A100与Google TPUv4平台，通过BERT-base（110M）和GPT-2（1.5B）的实测数据&#x…...

编程日记 2025/5/3 6:19:27

【dify—10】工作流实战——文生图工具

目录一、创建工作流应用二、安装硅基流动三、配置硅基流动四、API测试 （1）进入API文档 （2）复制curl代码 （3）Postman测试API 五、建立文生图工作流 （1）建立http请求 &…...

编程日记 2025/5/3 6:19:26

企业级分布式 MCP 方案

飞书原文档链接地址：https://ik3te1knhq.feishu.cn/wiki/D8kSwC9tFi61CMkRdd8cMxNTnpg 企业级分布式 MCP 方案 [!TIP] 背景：现阶段 MCP Client 和 MCP Server 是一对一的连接方式，若当前 MCP Server 挂掉了，那么 MCP Client 便不…...

编程日记 2025/5/3 6:19:26

玩转Docker（一）：基本概念

容器技术是继大数据和云计算之后又一炙手可热的技术，而且未来相当一段时间内都会非常流行。本文将对其基本概念和基本使用做出介绍。包括容器生态系统、容器的原理、怎样运行第一个容器、容器技术的概念与实践、Docker镜像等等目录一. 鸟瞰容器生态系统 1. 容器…...

编程日记 2025/5/3 6:18:24

Linux系统安装方式+适合初学者的发行版本

Linux系统安装方式适合初学者发行版—目录一、Linux系统的安装方式1. 物理机直接安装2. 虚拟机安装3. 双系统安装4. Live USB试用5. 云服务器安装二、适合初学者的Linux发行版1. Ubuntu2. Linux Mint3. Zorin OS4. Pop!_OS5. Elementary OS6. Fedora7. Manjaro 三、选择建议场…...

编程日记 2025/5/3 6:18:24

开启 Spring AI 之旅：从入门到实战

开启 Spring AI 之旅：从入门到实战引言在当今人工智能飞速发展的时代，Spring AI 为开发者们提供了一个强大而便捷的工具，用于在 Spring 生态系统中构建 AI 应用程序。本文将为你提供如何开始使用 Spring AI 的详细指南，帮助你…...

编程日记 2025/5/3 6:18:22

python数据分析（七）：Pandas 数据变形与重塑

Pandas 数据变形与重塑全面指南 1. 引言在数据分析过程中，我们经常需要将数据从一种结构转换为另一种结构，以适应不同的分析需求。Pandas 提供了丰富的数据变形与重塑功能，包括旋转(pivot)、堆叠(stack)、融合(melt)等多种操作。本文将详细…...

编程日记 2025/5/4 23:26:18

SX24C01.UG-PXI程控电阻桥板卡

PXI程控电阻桥板卡概述简介程控电阻桥板卡采用4 个可程控精密调节的电阻臂组成桥式电路，通过计算机PXI总线控制继电器通断进行电阻调节；可根据具体情况，方便地选择不同桥路的连接；程控电阻桥板卡支持“1/4 桥”、“半桥”和…...

编程日记 2025/5/3 6:17:20

Python项目源码69：一键解析+csv保存通达信日线数据3.0

Python项目源码39：学生积分管理系统1.0（命令行界面Json） Python项目源码38：模拟炒股系统2.0（tkinterJson） Python项目源码35：音乐播放器2.0（Tkintermutagen） Python项…...

编程日记 2025/5/3 6:17:19

Conda 与 Spyder 环境管理

前言作为 Python 科学计算领域的黄金搭档，Anaconda 和 Spyder 为研究人员和数据分析师提供了强大的工作环境。本文将详细介绍如何使用 Conda 管理 Python 环境，并在 Spyder IDE 中灵活切换这些环境，助你打造高效的 Python 开发工作流。一…...

编程日记 2025/5/3 6:17:18

头皮理疗预约小程序开发实战指南

生活服务类小程序开发正成为互联网创业的热点领域，头皮理疗预约小程序作为其中的细分品类，具有广阔的市场前景和用户需求。基于微信小程序原生开发或uniapp框架，结合Java后端和MySQL数据库，可构建一个功能完善、性能稳定且易于维护的头皮理疗预约平台。本文将从零开始，详细…...

编程日记 2025/5/3 6:17:18

cPanel 的 Let’s Encrypt™ 插件

在 cPanel & WHM 中，推出了一个名为 AutoSSL 的功能。可能有些朋友还不了解 AutoSSL，它是一个能够自动为您的网站申请和安装免费 SSL 证书的工具，这些证书由 Comodo 签发，保证网站的安全性。 AutoSSL 与 Let’s Encrypt Let’…...

编程日记 2025/5/3 6:17:17

《Android 应用开发基础教程》——第十一章：Android 中的图片加载与缓存（Glide 使用详解）

目录第十一章：Android 中的图片加载与缓存（Glide 使用详解） 🔹 11.1 Glide 简介 🔸 11.2 添加 Glide 依赖 🔸 11.3 基本用法 ✦ 加载网络图片到 ImageView： ✦ 加载本地资源 / 文件 / UR…...

编程日记 2025/5/6 21:33:42

MySQL 中的游标（Cursor）

一、游标的作用逐行处理数据：当需要对查询结果集中的每一行进行特定操作（如计算、条件判断、调用其他过程）时使用。替代集合操作：在无法通过单一 SQL 语句完成复杂逻辑时，游标提供逐行处理的能力。…...

编程日记 2025/5/3 6:16:15

【嵌入式Linux】基于ARM-Linux的zero2平台的智慧楼宇管理系统项目

目录 1. 需求及项目准备（此项目对于虚拟机和香橙派的配置基于上一个垃圾分类项目，如初次开发，两个平台的环境变量，阿里云接入，摄像头配置可参考垃圾分类项目）1.1 系统框图1.2 硬件接线1.3 语音模块配置1.4 …...

编程日记 2025/5/3 6:16:14

相关文章：