13.(vue3.x+vite)组件间通信方式之provide与inject

news2024/11/27 6:31:20

前端技术社区总目录(订阅之前请先查看该博客)

示例效果

在这里插入图片描述

依赖注入Provide / Inject

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。
像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据。

props子组件是不可以修改祖先组件的数据,而Provide子组件不受单向数据流的限制,是可以修改祖先组件的数据。

父组件代码

<template>
  <

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1213169.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript数据存储

原始类型&#xff1a;存储在栈内存中&#xff0c;每次开辟的空间大小是固定 引用类型&#xff08;对象、函数、数组&#xff09;&#xff1a;存储在堆内存中&#xff0c;开辟的空间大小根据数据的大小决定 // 声明变量会在栈内存中开辟空间 // 创建对象在堆内存中开辟空间&…

OpenAI:我们暂停了ChatGPT Plus新用户注册

今天中午&#xff0c;OpenAI 首席执行官 Sam Altman 在 X 平台发文说&#xff0c;将暂停 ChatGPT Plus 新用户注册。 we are pausing new ChatGPT Plus sign-ups for a bit > :( the surge in usage post devday has exceeded our c> apacity and we want to make sure e…

Spring 国际化:i18n 如何使用

1、i18n概述 国际化也称作i18n&#xff0c;其来源是英文单词 internationalization的首末字符i和n&#xff0c;18为中间的字符数。由于软件发行可能面向多个国家&#xff0c;对于不同国家的用户&#xff0c;软件显示不同语言的过程就是国际化。通常来讲&#xff0c;软件中的国…

一文搞懂CAN总线协议

1.基础概念 CAN 是 Controller Area Network 的缩写&#xff08;以下称为 CAN&#xff09;&#xff0c;是 ISO 国际标准化的串行通信协议。在北美和西欧&#xff0c;CAN 总线协议已经成为汽车计算机控制系统和嵌入式工业控制局域网的标准总线&#xff0c;并且拥有以 CAN 为底层…

OpenAI发布会震撼AI界,千字文全面解读

你的朋友圈是否被近日 OpenAI 的开发者大会刷屏了&#xff1f;这是预料之中的事。在近日&#xff0c;OpenAI 首度召开了旨在定义未来应用市场的开发者大会。 让我们迅速捕捉 OpenAI 最新的动态以及 ChatGPT 的更新亮点。 1、OpenAI 最新动态 今晨的盛会聚焦于以下要点&#xf…

Web服务Openlab的搭建

Web服务Openlab的搭建 网站需求&#xff1a; 基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站 基于 www.openlab.com/student 网站访问学生信息&#xff0c; 基于 www.openlab.…

5个用于地理空间数据分析的Python包

大家好&#xff0c;地理空间数据分析在城市规划、环境研究、农业和交通等行业中至关重要。不断增长的需求导致Python包在各种地理数据分析要求上的使用增加&#xff0c;例如分析气候模式、研究城市发展或跟踪疾病传播等&#xff0c;评估和选择具有快速处理、修改和可视化能力的…

Leetcode2652. 倍数求和

Every day a Leetcode 题目来源&#xff1a;2652. 倍数求和 解法1&#xff1a;模拟 计算在 [1&#xff0c;n] 范围内能被 3、5、7 整除的所有整数之和。 代码&#xff1a; /** lc appleetcode.cn id2652 langcpp** [2652] 倍数求和*/// lc codestart class Solution { pu…

【Nginx】使用nginx进行反向代理与负载均衡

使用场景 反向代理&#xff1a;一个网站由许多服务器承载的&#xff0c;网站只暴露一个域名&#xff0c;那么这个域名指向一个代理服务器ip&#xff0c;然后由这台代理服务器转发请求到网站负载的多台服务器中的一台处理。这就需要用到Nginx的反向代理实现了 负载均衡&#xf…

LOWORD, HIWORD, LOBYTE, HIBYTE的解释

文章目录 实验结论 实验 int 类型大小正常为4Byte 以小端序来看 0x12345678在内存中的存储为 0x78 0x56 0x34 0x120x78在低地址&#xff0c;0x12在高地址 程序输出 #include <stdio.h> #include <string.h> #include<windows.h>int main() {int a 0x12345…

第四代管网水位监测仪:管网水位监测仪使用方法

排水管网水位监测是城市管理的重要环节之一&#xff0c;城市管理部门一直都想要确保排水管网的正常运行&#xff0c;以此促进城市的发展和智慧城市的建设。想要依靠人工对城市排水管网设施进行检修是一个大工程&#xff0c;不仅要耗费大量的人工和时间成本&#xff0c;还有可能…

《QT从基础到进阶·二十七》进度条QProgressBar

ui.ProgressBar.setValue(45); //45% ui.ProgressBar.setMin(0); ui.ProgressBar.setMax(255);0到100分为255份&#xff0c;值为215时&#xff0c;进度条为100/255*215 84% 点击主界面弹出进度条QProgressDialog 常用功能&#xff1a; setWindowFlags(Qt::Dialog | Qt::Cu…

沉醉于代码的境界:探寻计算机书籍的奇妙之旅

文章目录 书中的代码乐章科技解密的乐趣技术指南的引路明灯书籍带给我的启示结语 &#x1f389;欢迎来到数据结构学习专栏~沉醉于代码的境界&#xff1a;探寻计算机书籍的奇妙之旅 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f38…

掌握Python中的控制流语句:break, continue, quit的应用技巧详解

引言 在Python编程中&#xff0c;控制流语句是非常重要的一部分&#xff0c;它们可以帮助我们控制程序的执行流程。其中&#xff0c;break、continue和quit是常用的控制流语句&#xff0c;它们可以在循环中起到关键作用。本文将详细介绍这些控制流语句的应用技巧&#xff0c;帮…

无烟火焰:探索酒精壁炉的魅力

随着技术的不断发展&#xff0c;现代生活的很多方面都发生了变化&#xff0c;包括我们如何取暖和装饰我们的家。酒精壁炉是一个迅速崭露头角的家居装饰方式&#xff0c;为家庭带来了一种别具一格的现代化火焰体验。 过去&#xff0c;我们可能依赖于传统的木材壁炉或煤气取暖系统…

无线终端掉线问题专题

一、终端连接过程 1、通过beacon或者probe帧发现设备 2、accoc和auth过程 3、EAP过程 4、DHCP过程 5、portal过程 6、终端检测wlan是否可以上网 7、正常接入网络 二、终端无法上网 终端无法上网则说明终端在连接过程中某一个环节除了问题 1、发现AP过程&#xff0c;p…

零成本体验美国云服务器,更方便的体验和选择

在当今数字化时代&#xff0c;云计算已经成为了企业和个人的首选。而美国云服务器免费试用&#xff0c;则为广大用户提供了一个零风险尝试的机会。作为一种高效、灵活、稳定的解决方案&#xff0c;美国云服务器可以为您的业务保驾护航。 什么是美国云服务器&#xff1f; 美国云…

CFCA国密证书

CFCA是中国金融认证中心的缩写&#xff0c;即China Financial Certification Authority。它是一家经过中国人民银行和国家信息安全机构批准成立的国家级权威安全认证机构&#xff0c;也是国际CA浏览器联盟组织&#xff08;CA/Browser Forum&#xff09;的成员&#xff0c;遵循全…

【Unity】Unity开发微信小游戏(三)工具使用Instant Game

Instant Game窗口通过Window->Auto Streaming打开。 也可参考官方详细说明 1.Texture Streaming 配置游戏内texture是否使用streaming功能&#xff0c;以及streaming placeholder的类型。AutoStreaming用placeholder图片替换游戏首包内的原始贴图&#xff0c;游戏运行时&a…

JavaScript语法、语句、数据类型

一、JavaScript语法&#xff1a; 1、JavaScript字面量&#xff1a; JavaScript中的固定值称为字面量。数字字面量可以是整数、小数或者科学计数&#xff08;e&#xff09;,如3.1415926、1008、123e5等&#xff1b;字符串字面量可以使用单引号或者双引号&#xff0c;如“corli…