07.组件间通信-provide-inject(祖孙通信)

组件间通信-provide-inject(祖孙通信)
父组件:

<template><div class="father"><h3>父组件</h3><h4>银子:{{ money }}万元</h4><h4>车子:一辆{{car.brand}}车,价值{{car.price}}万元</h4><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})function updateMoney(value:number){money.value -= value}// 向后代提供数据provide('moneyContext',{money,updateMoney})provide('car',car)
</script>
<style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

子组件:

<template><div class="child"><h3>我是子组件</h3><GrandChild/></div>
</template>
<script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script>
<style scoped>.child {margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

孙组件:

<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";let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})let car = inject('car',{brand:'未知',price:0})
</script>
<style scoped>.grand-child{background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

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

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

相关文章

【计算机网络】P3 计算机网络协议、接口、服务的概念、区别以及计算机网络提供的三种服务方式

目录 协议什么是协议协议是水平存活的协议的组成 接口服务服务是什么服务原语 协议与服务的区别计算机网络提供的服务的三种方式面向连接服务与无连接服务可靠服务与不可靠服务有应答服务与无应答服务 协议 什么是协议 协议&#xff0c;就是规则的集合。 在计算机网络中&…

# 梯影传媒T6投影仪刷机方法及一些刷机工具链接

梯影传媒T6投影仪刷机方法及一些刷机工具链接 文章目录 梯影传媒T6投影仪刷机方法及一些刷机工具链接1、安装驱动程序2、备份设备rom【boot、system】3、还原我要刷进设备的rom【system】4、打开开发者模式以便于安装apk5、root设备6、更多好链接&#xff1a; 梯影传媒T6使用的…

Redis系列-4 Redis集群介绍

Redis集群 Redis提供了持久化能力&#xff0c;保证了重启不会丢失数据&#xff1b;但Redis重启至完全恢复期间&#xff0c;缓存不可用。另外&#xff0c;对于高并发场景下&#xff0c;单点Redis服务器的性能不能满足吞吐量要求&#xff0c;需要进行横向扩展。此时&#xff0c;…

八爪鱼现金流-021-形势不好,不折腾也许是最好的选择

形势不好。大家都不敢消费了。 已经优化3波人了。 有技术、甚至有关系的&#xff0c;都可能被优化掉。 大家都在想着怎么多赚钱。弄点什么副业。 开直播&#xff0c;运营x书账号&#xff0c;摆摊。 所有你能想到的&#xff0c;早就有人做的非常好&#xff0c;非常专业了。 …

深入理解交叉熵损失CrossEntropyLoss - 信息论(交叉熵)

深入理解交叉熵损失CrossEntropyLoss - 信息论&#xff08;交叉熵&#xff09; 信息论 深入理解交叉熵损失CrossEntropyLoss - 信息论&#xff08;交叉熵&#xff09;一、自信息&#xff08;Self-Information&#xff09;1. 符号取负2. 对数的性质3. 信息的度量数学推导与例子 …

软件设计,建模及需求分析

文章目录 设计原则建模及需求分析UML画图工具原型图画图工具 重构 设计原则 SOLID原则 单一职责 开闭 &#xff08;扩展开放&#xff0c;修改关闭&#xff09; 里氏替换 &#xff08;父类出现地方都可以用子类替换&#xff09; 接口隔离 依赖倒置&#xff08;高层模块不依…

cmake使用make和Ninja构建对比

前提 make和Ninja是两个常见的构建工具&#xff0c;在网上查阅了一些资料&#xff0c;说是Ninja比make构建速度要快很多。但是具体不知道快多少&#xff0c;所以趁着这次编译clang的机会&#xff0c;分享下它们在时间方面差多少。 步骤 下载llvm 参考llvm官网&#xff0c;这…

stream 流的一些底层实现原理

闭包 闭包的底层实现?外层的变量成为方法的一部分会生成一个lambda方法&#xff0c;将源本的2个参数转化3个参数此时变量就成为了方法的一部分值是如何传递的呢?会有一个专门的类用于存储此变量的值 流的切分后再并行 数组或者是集合&#xff0c;需要用到一个可切分的迷代器这…

【Linux高级IO】select、poll、epoll

【Linux高级IO】select、poll、epoll toc 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2024.6.5 前言&#xff1a;本篇博客将会介绍面试重点考察的select、poll、epoll IO: input && Output read && write 应用层read&&write的时候&#xff0c…

手机UI设计中的按钮状态包含哪几种

在手机UI设计中&#xff0c;按钮的状态设计是用户体验中非常关键的一部分。通常&#xff0c;这些状态会明确地告知用户按钮的当前状态以及可能的交互结果。以下是手机UI设计中常见的按钮状态及其特点&#xff1a; 普通状态&#xff08;Normal State&#xff09;&#xff1a; …

【全开源】安心护送非急救救护车转运平台小程序(FastAdmin+ThinkPHP+Uniap

&#x1f691;安心护送非急救救护车转运平台小程序——您的健康守护者&#x1f496; 安心护送转运平台小程序是一款基于FastAdminThinkPHPUniapp开发的非急救救护车租用转运平台小程序系统&#xff0c;可以根据运营者的业务提供类似短途接送救护服务&#xff0c;重症病人转运服…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于状态分解的综合能源系统完全分布式调度算法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【frp】frpc客户端在ubuntu服务器上的配置

FRP简单配置内网穿透 官方仓库 ,说明比较简单 复杂一点要付费加入星球了。 而且frp还支持插件,目前还不清楚具体使用。 幸好,这位大神给出的非常详细 而且客户端与服务端都是部署在ubuntu的: 【frp】服务端配置与systemd启动 进行了frps的简单配置。 局域网内的机器是ubunt…

【代码随想录训练营】【Day 43】【动态规划-3】| Leetcode 343, 96

【代码随想录训练营】【Day 43】【动态规划-3】| Leetcode 343, 96 需强化知识点 思路&#xff1a;343 and 96 题目 343. 整数拆分 dp 含义&#xff1a;拆分i&#xff0c;乘积最大值&#xff1b;依次遍历 i的因子&#xff0c;记录最大值&#xff0c;max&#xff08;之前的…

sqli-labs 靶场 less-7 第七关详解:OUTFILE注入与配置

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 7 SQLI DUMB SERIES-7判断注入点 进入页面中&#xff0c;并输入数据查看结果。 发现空数据提…

【C++11数据结构与算法】C++ 栈

C 栈(stack) 文章目录 C 栈(stack)栈的基本介绍栈的算法运用单调栈实战题LC例题&#xff1a;[321. 拼接最大数](https://leetcode.cn/problems/create-maximum-number/)LC例题&#xff1a;[316. 去除重复字母](https://leetcode.cn/problems/remove-duplicate-letters/) 栈的基…

下决心!学点前端图形开发来提升自已

前端图形开发已成为Web开发绕不开的部分。提升自己前端图形开发能力&#xff0c;才能快点在岗位中突围。但一看到各大实战教程的学习路径就犯难了。 内容不少&#xff0c;感觉学到老也跳不出来啊。还是走回老路&#xff1f;搞个热门国外开源框架应付算了。 我简单通过对图形系…

程序猿大战Python——流程控制——if基础语句

三大基本语句 目标&#xff1a;了解三大基本语句有哪些&#xff1f; Python中有三大基本语句&#xff0c;它们支撑起了程序的业务逻辑处理。 三大基本语句有&#xff1a; &#xff08;1&#xff09;顺序语句 &#xff08;2&#xff09;分支语句 &#xff08;3&#xff09;循…

树莓派 5 AI 套件(Hailo)示例

系列文章目录 前言 欢迎访问 Hailo Raspberry Pi 5 示例库。本项目展示了在 Raspberry Pi 5 上演示 Hailo AI 处理器功能的各种示例。这些示例将帮助您开始在嵌入式设备上使用人工智能。更多信息&#xff0c;请访问 Hailo 官方网站和 Hailo 社区论坛。 一、如何设置 Raspberry…

Apple - Quartz 2D Programming Guide

本文翻译自&#xff1a;Quartz 2D Programming Guide&#xff08;更新时间&#xff1a;2017-03-21 https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html#//apple_ref/doc/uid/TP300010…