vue3中的provide与inject跨层级组件(祖孙)间通信

· provide和inject提供依赖注入,功能类似 vue2.x 的provide/inject

· 实现跨层级组件(祖孙)间通信

子或孙子组件接收到的数据可以用于读取显示,也可以进行修改,同步修改父(祖)组件的数据。

注意:无论子组件是否接收了该数据,孙子组件都可使用inject接收修改该数据。

(祖)父组件代码:

<template><div style="font-size: 14px"><h3>测试provide与inject跨层级组件(祖孙)间通信</h3><Child /></div>
</template><script lang="ts">
import {defineComponent,reactive,onMounted,toRefs,provide,
} from 'vue'
import Child from './Child.vue'
// vue3.0语法
export default defineComponent({name: '父组件名',components: {Child,},setup() {const state = reactive({id: '',user: {name: '张三',age: 0,},})onMounted(() => {// 模拟一个接口请求setTimeout(() => {state.id = '父组件请求接口得来的id'state.user = {name: '张三丰',age: 18,}}, 2000)})provide('state', state)return {...toRefs(state),}},
})
</script>

子组件代码:

<template><div style="font-size: 14px;background: skyblue;"><!-- 子组件内容 --><h3>子组件</h3><p>子组件inject接收到的state{{ state }}</p></div><Grandson />
</template><script lang="ts">
import { defineComponent, onMounted, inject } from 'vue'
import Grandson from './Grandson.vue'
// vue3.0语法
export default defineComponent({name: '子组件名',components: {Grandson},setup() {const state = inject('state')onMounted(() => {console.log('onMounted Child', state)})return {state}},
})
</script>

孙子组件代码:

<template><div style="font-size: 14px; background: pink"><!-- 孙子组件内容 --><h3>孙子组件</h3><p>孙子组件inject接收到的state{{ state }}</p><button @click="changeUser">修改父组件传来信息</button></div>
</template><script lang="ts">
import { defineComponent, onMounted, inject } from 'vue'
// vue3.0语法
export default defineComponent({name: '孙子组件名',setup() {const state = inject('state')function changeUser() {state.id = '孙子组件修改后的id'state.user.name = '小明'state.user.age = 22}onMounted(() => {console.log('onMounted Grandson', state)})return {state,changeUser}},
})
</script>

初始页面效果:

初始页面显示结果:子和孙子组件都接收到了同样的数据显示。

2秒后(祖)父修改了数据页面效果:

2秒后页面显示结果:子和孙子组件都接收的数据同步发生了修改。

点击孙子组件的修改父组件传来信息按钮修改数据后》页面效果:

孙子组件将接收的数据修改后,父(祖父)的数据也同步被修改。

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

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

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

相关文章

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码)

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码&#xff09; 这次项目所使用的代码如果同志们可以灵活使用&#xff0c;基本上可以解决百分之九十以上的pdf模板自动化生成。 最近博主&#xff0c;做了一个项目&#xff0c;使用reportlab制作pd…

程序包不存在

idea2020会有一个小bug&#xff0c;在idea的Settings设置中进行下面配置&#xff1a; 然后在maven项目下的pom.xml中加入如下代码&#xff1a; <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifact…

【Android面试|华为|锁相关】- synchronize(this) 和 synchronize(class)有什么区别

华为面试官问了其中一个问题 Q: synchronize(this) 和 synchronize(class)一样么&#xff1f; 是否可以用synchronize(this) 来锁 A: 当使用 synchronized 加锁 class 时&#xff0c;无论共享一个对象还是创建多个对象&#xff0c;它们用的都是同一把锁&#xff0c;而使用 sync…

【趣味JavaScript】一文让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! 《重置版》

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起学习和进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&a…

Oracle忘记所有密码怎么办

最近遇到一个Oracle的问题&#xff0c;密码要过期了&#xff0c;但是除了用户密码&#xff0c;其他密码都不知道了&#xff0c;修改不了密码怎么办呢&#xff1f; 试了各种方法&#xff0c;最终下面的方式生效了&#xff1a; 首先&#xff0c;使用orapwd生成新的密码文件&…

云计算如何创芯:“逆向工作法”的性感之处

在整个云计算领域&#xff0c;能让芯片规模化的用起来&#xff0c;是决定造芯是否成功的天花板。在拉斯维加斯的亚马逊云科技2023 re:Invent则是完美诠释了这一论调。 亚马逊云科技2023 re:Invent开幕前两个小时&#xff0c;有一场小型的欢迎晚宴&#xff0c;《星期日泰晤士报》…

BUUCTF [GXYCTF2019]SXMgdGhpcyBiYXNlPw== 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 密文&#xff1a; 下载附件&#xff0c;解压得到flag.txt文件。 解题思路&#xff1a; 1、打开flag.txt文件&#xff0c;内容如下。 Q2V0dGUgbnVpdCwK SW50ZW5hYmxlIGluc29tbm…

【如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程】

如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程 写个Bat 批处理文件&#xff0c;现自动编译Keil工程和C# Visual Studio工程。这样可以结合Python 实现复杂的操作。 编译Keil工程&#xff1a; echo off set UVC:\Keil_v5\UV4\UV4.exe set UV_PRO_PATHD:\worksp…

React有哪些优化性能的手段?

使用合成事件&#xff1a;React的合成事件系统能够提高性能&#xff0c;因为它使用事件委托&#xff0c;将事件监听器挂载在顶层容器上&#xff0c;而不是每个DOM元素上。减少了事件监听器的数量&#xff0c;从而减小了内存和性能开销。 使用组件级别的shouldComponentUpdate或…

Python编程题集(第三部容器操作 )

Demo61 指定等级 题目描述 读入学生成绩&#xff0c;获取最高分best&#xff0c;然后根据下面的规则赋等级值&#xff1a; &#xff08;1&#xff09;如果分数≥best-10&#xff0c;等级为A &#xff08;1&#xff09;如果分数≥best-20&#xff0c;等级为B &#xff08;1…

常见基础指令【Linux】

目录 一、Linux基本指令1. ls2. pwd3. cd4. touch5. mkdir6. rm和rmdir7. man8. cp9. mv10. cat11. tac12. more13. less14. head15. tail16. date17. cal18. find19. grep20. zip/unzip21. echo22. wc23. tree24. which25. alias26. whoami27. stat28. tar29. uname30. shutdo…

React实现登录授权功能

一、概述 本文将通过React Router & React Redux & Umi.js useModel 实现登录和授权路由功能。 二、技术实现 auth-action-reducer (redux配置) export const Login (username, password) > ({type: login,username: username,password: password }; export con…

vue3+element-plus之el-date-picker日期选择器清空无回调的解决方案

MENU 前言解决htmlJavaScrip 前言 在一个任务列表的搜索栏&#xff0c;添加一个日期区间搜索。使用到element-plus中的日期选择器el-date-picker&#xff1b;el-date-picker本身方法中有change事件&#xff0c;但是清空按钮没有对应回调方法。在任务列表的搜索需求中&#xff0…

如何自定义winform控件,并把它添加到工具箱,供拖动使用

首先&#xff0c;在想要用自定义控件的解决方案中新建一个项目&#xff0c;该项目用来存放所有的自定义控件。 解决方案-右键-添加-新建项目 添加新项目的界面选择Windows窗体控件库&#xff0c;点击确定。 此时&#xff0c;已经添加好了新的项目&#xff0c;默认会有一个自定…

记RocketMQ本地开发环境搭建始末

前言 最近工作中涉及到了RocketMQ的应用&#xff0c;为方便开发决定本地搭建一套RocketMQ的使用环境。 果然实践是个好东西... VMware虚拟环境搭建 这个网上有很多教程&#xff0c;只会比我写的详细有条理&#xff0c;这里就不在赘述了。 虚拟机搭建好之后每次重启电脑都无…

js命名规则

变量和函数命名使用驼峰命名法&#xff08;camelCase&#xff09;&#xff0c;即首字母小写&#xff0c;后续单词首字母大写&#xff0c;例如&#xff1a;myVariable、myFunction。类名使用帕斯卡命名法&#xff08;PascalCase&#xff09;&#xff0c;即每个单词的首字母都大写…

nginx配置反向代理及负载均衡

目录 1.前端发送的请求&#xff0c;是如何请求到后端服务的1.nginx 反向代理的好处&#xff1a;2.nginx 反向代理的配置方式&#xff1a;3. nginx 负载均衡的配置方式 1.前端发送的请求&#xff0c;是如何请求到后端服务的 1.nginx 反向代理的好处&#xff1a; 提高访问速度 因…

分析一段文字中重复词组,英文版

String text " aaaaabbbacccdaaaabbbbccccaaa"; Pattern patten Pattern.compile("[a-zA-Z]"); // 用Pattern类中的matcher()方法,生成一个匹配器对象&#xff0c;Matcher类是匹配器类 String sbstring text.toString(); Matcher matcher patten.ma…

全系降3万,一把干到底,极越「智取」特斯拉

作者|德新 编辑|王博 11月30日&#xff0c;极越01官宣全系降价3万。 这意味着21.99万起步的极越01 Max&#xff0c;成为这个市场上入门门槛最低的带有城市智能驾驶辅助功能的车型。 要知道这是一台比Model Y大了一圈&#xff0c;全系配置了高阶智驾硬件&#xff0c;全系配高…

Apache HTTPD 2.448 mod_proxy SSRF漏洞(CVE-2021-40438)

任务一&#xff1a; 复现漏洞 任务二&#xff1a; 尝试利用SSRF漏洞&#xff0c;访问重庆邮电大学官网&#xff08;http://www.cqupt.edu.cn) 1.搭建环境 2.了解这个地方是httpd作为了一个反向代理服务器&#xff0c;也就是先是客户端发送请求给代理服务器&#xff0c;然后…