vue3中provide 和 inject 用法#Vue3中解决局部刷新问题

vue3中provide 和 inject 用法#Vue3中解决局部刷新问题

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。

像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。
在这里插入图片描述
在这里插入图片描述
使用之前,必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数:

provide( name,value )

父组件index.vue(provide提供数据):

<!-- 子组件 -->
<app-main v-if="isNavbar" />
<!--  刷新成功弹窗提示 -->
<div><el-dialogv-model="dialogVisible"width="170":show-close=false:modal=falsestyle="padding: 0;border: 1px solid #e6e6e6;border-radius: 5px"><div style="display: flex; margin-left:10px;margin-top: -10px;"><el-icon :size="40" color="green"><CircleCheck /></el-icon><span style="margin-left: 5px;margin-top: -2px; font-size: 15px;">刷新成功</span></div></el-dialog></div>
import { nextTick,provide } from 'vue'const isNavbar = ref(true)
const reload = ()=>{isNavbar.value = falsedialogVisible.value=truenextTick(()=>{isNavbar.value = true})setTimeout(() => {dialogVisible.value = false}, 1000);
}
// 父组件使用 provide 提供数据
provide("reload",reload)

inject 函数有两个参数:

inject(name,default)

name:接收 provide 提供的属性名。

子组件Navvar.vue(inject接收数据):

<el-icon :size="20" @click="getRefresh"><Refresh /></el-icon>import {inject} from 'vue'// 接收父组件 provide 提供的 reload 数据
const getRefresh = inject("reload") as any

解决局部刷新问题
在这里插入图片描述

局部刷新

但是话又说回来,为什么大家都很少用provide和inject呢?可能有什么弊端吧

详细请参考这篇文章

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

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

相关文章

【JavaScript 算法】KMP算法:高效的字符串匹配

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理部分匹配表的构建 二、算法实现构建部分匹配表KMP字符串匹配注释说明&#xff1a; 三、应用场景四、总结 KMP算法&#xff08;Knuth-Morris-Pratt Algorithm&#xff09;是一种用于在文本中高效查找子串的字符串…

昇思学习打卡-21-生成式/Diffusion扩散模型

文章目录 Diffusion扩散模型介绍模型推理结果 Diffusion扩散模型介绍 关于扩散模型&#xff08;Diffusion Models&#xff09;有很多种理解&#xff0c;除了本文介绍的离散时间视角外&#xff0c;还有连续时间视角、概率分布转换视角、马尔可夫链视角、能量函数视角、数据增强…

【BUG】已解决:AttributeError: ‘DataFrame‘ object has no attribute ‘append‘

已解决&#xff1a;AttributeError: ‘DataFrame‘ object has no attribute ‘append‘ 目录 已解决&#xff1a;AttributeError: ‘DataFrame‘ object has no attribute ‘append‘ 【常见模块错误】 错误原因&#xff1a; 解决办法&#xff1a; 欢迎来到英杰社区https:/…

215. 数组中的第K个最大元素 347. 前 K 个高频元素(LeetCode热题100)

215. 数组中的第K个最大元素 - 力扣&#xff08;LeetCode&#xff09; 写个快排&#xff0c;使数组升序&#xff0c;返回倒数第k个元素即可 func quickSort(nums []int, l int, r int) {if l > r {return}x : nums[(l r) / 2]i : l - 1j : r 1for i < j {for {iif n…

[力扣Java解题分享]12.74搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

大鲸鱼docker-compose单机容器集群编排工具

目录 一、Docker-compose 概述 二、Docker-compose简介 三、YML文件格式及编写注意事项 1.yml文件是什么 2.yml问价使用注意事项 3.yml文件的基本数据结构 四、Docker-compose 配置 1.Docker-Compose 配置常用字段 2.Docker Compose常用命令 3.使用Docker-compose创建…

【笔记:3D航路规划算法】一、随机搜索锚点(python实现,讲解思路)

目录 关键概念3D路径规划算法1. A*算法2. 快速随机锚点1. 初始化&#xff1a;2. 实例化搜索算法&#xff1a;3. 路径生成&#xff1a;4. 绘制图像&#xff1a; 3D路径规划是在三维空间中寻找从起点到终点的最短或最优路径的一种技术。它广泛应用于无人机导航、机器人运动规划、…

【医学影像】X86+FPGA:支持AI医学影像设备应用的工控主板,赋能CT、MRI、X线、超声等医学影像设备

支持AI医学影像设备应用的工控主板 在我国人口老龄化问题不断加剧&#xff0c;对影像诊断需求持续增长&#xff0c;和国家利好高端医学影像市场发展的系列法规和政策接连出台的大环境下&#xff0c;AI医学影像设备产业迎来发展黄金期。紧跟发展大势&#xff0c;基于12/13代 In…

Federated Graph Augmentation for Semisupervised Node Classification

文章目录 1 本文的主要贡献2 FedGA 模型3 FedGA-L 模型3.1 模型的思想3.2 模型具体步骤 4 实验 1 本文的主要贡献 解决图联邦学习中利用图拓扑结构和无标签节点数据的难题&#xff0c;提出了一种称为联合图增强(FedGA)的新方法&#xff0c;以更好地利用拓扑信息&#xff0c;然…

【python学习】python的知识点总结、特点和思考及解答(代码示例)

引言 python 是一种高级编程语言&#xff0c;具有简洁的语法和丰富的库&#xff0c;被广泛应用于Web开发、数据分析、人工智能、科学计算等领域 文章目录 引言一、python知识点总结1.1 基础语法1.1.1 变量和数据类型1.1.2 控制结构1.1.3 函数和模块 1.2 面向对象编程1.2.1 类和…

如何通过成熟的外发平台,实现文档安全外发管理?

文档安全外发管理是企业信息安全管理的重要组成部分&#xff0c;它涉及到企业向外发送的文件&#xff0c;需要进行严格的控制和管理&#xff0c;防止敏感或机密信息的泄露。以下是一些关键考虑因素&#xff1a; 文件外发的挑战&#xff1a;企业在文件外发时面临的主要挑战包括…

wls2下的centos使用桥接模式连接宿主机网络独立静态ip

前提&#xff1a;wsl2已安装&#xff0c;可正常更新 1.在控制面板中&#xff0c;打开开启或关闭windows功能&#xff0c;将里面的 Hyper-V功能打开&#xff0c;此处涉及重启 2. 按一下win键&#xff0c;输入hy&#xff0c;上面可以看到Hyper-V Manager,点进去 3.选择右边的 Vi…

Fiddler抓包

一个不错的文档&#xff1a;萌新要入行-CSDN博客 测试之路&#xff1a;3年经验来面试20K的测试岗&#xff0c;连基本功都不会&#xff0c;还不如去招应届生 Fiddler教程&#xff1a;https://www.cnblogs.com/zhangyangcheng/articles/15218175.html Fiddler安装教程&#xff1…

F5理念左移,实现API安全的全生命周期管理

API是我们现代数字生活中隐形的中枢神经系统&#xff0c;从远程医疗到在线银行&#xff0c;实时API让世界变得更美好。不可否认的是&#xff0c;当应用程序和架构发生变化时&#xff0c;攻击面也会随之变化。传统的安全措施&#xff0c;比如WAF、DDoS和Bot防护仍然必不可少&…

java中传引用问题

在 Java 中&#xff0c;所有对象都是通过引用传递的&#xff0c;而基本数据类型是通过值传递的。 引用传递&#xff1a; 当一个对象作为参数传递给方法时&#xff0c;传递的是对象的引用。对这个对象引用进行的修改会影响到原始对象。例如&#xff1a; public class Test {p…

在eclipse中使用Junit单元测试的准备工作和基本介绍

JUnit准备工作和基本介绍 JUnit是一个Java语言的单元测试框架。。多数Java的开发环境都已经集成了JUnit作为单元测试的工具。 Junit 测试也是程序员测试&#xff0c;即所谓的白盒测试&#xff0c;它需要程序员知道被测试的代码如何完成功能&#xff0c;以及完成什么样的功能 …

Ubuntu24.04 NFS 服务配置

1、NFS 介绍 NFS 是 Network FileSystem 的缩写&#xff0c;顾名思义就是网络文件存储系统&#xff0c;它允许网络中的计算机之间通过 TCP/IP 网络共享资源。通过 NFS&#xff0c;我们本地 NFS 的客户端应用可以透明地读写位于服务端 NFS 服务器上的文件&#xff0c;就像访问本…

宠物空气净化器哪款品牌好?口碑好的猫用空气净化器排名

猫咪每年掉毛两次&#xff0c;一次掉半年的现象真让人头疼。作为一位5年资深铲屎官&#xff0c;特别是在掉毛季节&#xff0c;猫毛无处不在&#xff0c;对此深有体会。宠物空气净化器已成为铲屎官们的救星&#xff0c;能迅速清理家中的宠物毛发和异味&#xff0c;是养猫家庭的必…

关于APPCRASH的问题处理

最近小编遇到了APPCRASH的问题,打开任意一个exe可执行文件运行时候,windows记录是APPCRASH的问题. 因为是第一次遇到,当时就懵逼了,通过查找资料,现在把这类问题总结一下: 1.软件不兼容引起的crash,通常我们启用兼容性运行就可以解决,前提是以前在其他版本的系统上运行,现在换…

普中51单片机:LED点阵屏组成结构及实现方法详解(九)

文章目录 引言什么是LED点阵屏&#xff1f;工作原理74HC595移位寄存器基本引脚作用级联工作原理 电路图代码演示——16*16LED点阵屏轮播点亮每行LED代码演示——显示数字0代码演示——16*16游动字幕显示 引言 LED点阵屏作为一种广泛应用于现代显示技术的设备&#xff0c;因其能…