vue3 #跨组件通信

//爷爷组件中

import { provide , ref } from 'vue'

const money = ref (100)       //定义数据

provide( 'money' , money )     //提供数据给孙子组件

const changeMoney = ( m:number ) => {      //定义函数

    if (money) {

       money.value = money.value - m

  }

}

provide("changeMoney ",changeMoney)    //提供函数给孙子组件

// 孙子组件中

import { inject } from 'vue'

const money = inject('money')     //获取传递过来的数据

const changeMoney = inject<m:number> => viod ('changeMoney ')  //获取传递过来的函数

举例:如果在孙子组件中想要修改爷爷组件的数据

// 孙子组件中

<button @click="handleMoney">

import { inject } from 'vue'

const money = inject< Ref<number> >('money')     //获取数据

const handleMoney=()=> {

    if(money) {            //在跨组件通信中,可能没有传值,所有这里做一个判断

         money.value += 2

  }

}

⭐inject函数会默认将数据定义为unknown,所以这里需要定义一下传过来数据的类型

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

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

相关文章

Python系列(19)—— 条件语句

一、条件语句的基本概念 条件语句&#xff0c;也称为选择语句&#xff0c;允许程序根据条件的结果来执行不同的代码块。Python中最常用的条件语句是if语句&#xff0c;其基本语法如下&#xff1a; if condition:# 当条件为真时执行的代码块如果条件为真&#xff08;即非零或非…

学习总结22

解题思路 简单模拟。 代码 #include <bits/stdc.h> using namespace std; long long g[2000000]; long long n; int main() {long long x,y,z,sum0,k0;scanf("%lld",&n);for(x1;x<n;x)scanf("%lld",&g[x]);for(x1;x<n;x){scanf(&qu…

GEE必须会教程—时间都去哪了(Date参数类型)

时间和空间是世界存在的两种基本属性&#xff0c;大部分的数据都有特有的通道存储时间信息&#xff0c;用户需要通过获取数据存储的信息&#xff0c;来判断数据的可用性&#xff0c;以及数据在时间上发生的变化。在遥感上&#xff0c;空间数据集合中&#xff0c;时间信息显得更…

django配置视图并与模版进行数据交互

目录 安装django 创建一个django项目 项目结构 创建视图层views.py 写入视图函数 创建对应视图的路由 创建模版层 配置项目中的模版路径 创建模版html文件 启动项目 浏览器访问结果 安装django pip install django 创建一个django项目 这里最好用命令行完成&#xf…

SQL注入之DNSLog外带注入

一、认识&#xff1a; 什么是dnslog呢&#xff1f; DNS就是域名解析服务&#xff0c;把一个域名转换成对应的IP地址&#xff0c;转换完成之后&#xff0c;DNS服务器就会有一个日志记录本次转换的时间、域名、域名对应的ip、请求方的一些信息&#xff0c;这个日志就叫DNSLog。…

汉诺塔问题—java详解(附源码)

来源及应用 相传在古印度圣庙中&#xff0c;有一种被称为汉诺塔(Hanoi)的游戏。该游戏是在一块铜板装置上&#xff0c;有三根杆(编号A、B、C)&#xff0c;在A杆自下而上、由大到小按顺序放置64个金盘(如图1)。游戏的目标&#xff1a;把A杆上的金盘全部移到C杆上&#xff0c;并仍…

【Nacos】构建云原生应用的动态服务发现、配置管理和服务管理平台【企业级生产环境集群搭建应用】

基础描述 一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集&#xff0c;帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。Nacos 帮助您更敏捷和容易地构建、交付和…

猫头虎分享已解决Bug || Spring Error: Request method ‘POST‘ not supported

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

海思3559 yolov5 wk模型部署笔记

文章目录 安装3559工具链编译opencv编译项目总结 安装3559工具链 将3559工具链copy到虚拟机上&#xff0c;并解压得到安装包 解压&#xff1a; tar -zxvf aarch64-himix100-linux.tgz解压后会得到安装包文件夹&#xff1a; 安装工具链&#xff1a; sudo ./aarch64-himix100…

代码随想录算法训练营第17天—二叉树06 | ● *654.最大二叉树 ● 617.合并二叉树 ● 700.二叉搜索树中的搜索 ● *98.验证二叉搜索树

*654.最大二叉树 题目链接/文章讲解&#xff1a;https://programmercarl.com/0654.%E6%9C%80%E5%A4%A7%E4%BA%8C%E5%8F%89%E6%A0%91.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1MG411G7ox 考点 前序遍历构建二叉树 我的思路 参考了力扣题目里的提示递归三要…

【大数据面试题】008 谈一谈 Flink资源如何配置

【大数据面试题】008 谈一谈 Flink 资源如何配置 并行度 Parallelism 概念作用Slot 概念作用如何设置TaskManager 任务管理器Flink submit 脚本 一步一个脚印&#xff0c;一天一道面试题 该文章有较多引用文章 https://zhuanlan.zhihu.com/p/572170629?utm_id0 并行度 Paralle…

Unity2023.1.19没有PBR Graph?

Unity2023.1.19没有PBR Graph? 关于Unity2023.1.19没有PBR graph的说法,我没看见管方给出的答案,百度则提到了Unity2020版之后Shader Graph的“全新更新”,之前也没太注意版本的区别,以后项目尽量都留心一下。 之前文章说过,孪生智慧项目推荐使用URP渲染管线,以上的截…

安装sklearn遇到ImportError: dlopen: cannot load any more object with static TLS

1.看https://blog.csdn.net/Go_ahead_forever/article/details/133755918 知不能 pip install sklearn&#xff0c;而是 pip install scikit-learn2.网上说调换import的顺序就能解决。 但是我不知道调换哪个&#xff0c;索性重新开了anaconda环境&#xff0c;一个个安装缺什么…

Stable Diffusion 绘画入门教程(webui)-ControlNet(线稿约束)

上篇文章介绍了openpose&#xff0c;本篇文章介绍下线稿约束&#xff0c;关于线稿约束有好几个处理器都属于此类型&#xff0c;但是有一些区别。 包含&#xff1a; 1、Canny(硬边缘&#xff09;&#xff1a;识别线条比较多比较细&#xff0c;一般用于更大程度得还原照片 2、ML…

在docker中运行vins-fusion

文章目录 VINS-fusion拉取镜像创建容器在vscode中运行代码运行效果VINS-fusion VINS-Fusion 是一个开源的实时多传感器状态估计库,主要由香港科技大学的沈邵劼教授领导的研究团队开发。它是 VINS-Mono(单目视觉惯性系统)的扩展,支持多种传感器组合,如双目、立体相机和IMU…

Spring Security 认证授权安全框架

Spring Security概述 1.什么是Spring Security? Spring Security是一个Java框架&#xff0c;用于保护应用程序的安全性。它提供了一套全面的安全解决方案&#xff0c;包括身份验证、授权、防止攻击等功能。Spring Security基于过滤器链的概念&#xff0c;可以轻松地集成到任…

指针笔试题(C语言进阶)

目录 前言 1、案例一 1.1 答案 1.2 解析 2、案例二 2.1 答案 2.2 解析 3、案例三 3.1 答案 3.2 解析 4、案例四 4.1 答案 4.2 解析 5、案例五 5.1 答案 5.2 解析 总结 前言 “纸上得来终觉浅&#xff0c;绝知此事要躬行”。本篇通过对指针实际案例的分析&…

Google重磅开源!Gemma 2B/7B小模型登场,6万亿Tokens喂饱,聊天编程两不误,LLaMA也黯然失色?

Google又有大动作&#xff01; 近日&#xff0c;他们发布了Gemma 2B和7B两个开源AI模型&#xff0c;与大型封闭模型不同&#xff0c;它们更适合小型任务&#xff0c;如聊天和文本摘要。 这两个模型在训练过程中使用了6万亿个Tokens的数据&#xff0c;包括网页文档、代码和数学…

收单外包机构备案2023年回顾和2024年展望

孟凡富 本文原标题为聚合支付深度复盘与展望&#xff0c;首发于《支付百科》公众号&#xff01; 收单外包服务机构在我国支付收单市场中占据着举足轻重的地位&#xff0c;其规模在政策引导和市场需求驱动下不断扩大。同时&#xff0c;随着行业自律管理体系的持续发展和完善&a…

文献速递:GAN医学影像合成--用生成对抗网络生成 3D TOF-MRA 体积和分割标签

文献速递&#xff1a;GAN医学影像合成–用生成对抗网络生成 3D TOF-MRA 体积和分割标签 01 文献速递介绍 深度学习算法在自然图像分析中的成功近年来已被应用于医学成像领域。深度学习方法已被用于自动化各种耗时的手动任务&#xff0c;如医学图像的分割和分类&#xff08;G…