Vue3 中使用provide和reject
1、provide 和reject 可以实现一条事件线上的 父传子,父传孙等;相比较 props emits 仅限与父子传参更方便,相较于pinia书写更简单,但是需要注意使用响应式,如果是非响应式的会导致页面更新不及时
父组件
<template>
<div>PROVIDE</div>
{{ num }}
<button @click="handleChangeNum">change num</button>
<br>
<button @click="handleChangeData">change Data</button>
<br>
dataObj-name:={{ dataObj.age }}
<br>
<Child></Child>
</template>
<script setup lang="ts">
import { provide, ref, toRef, reactive, toRefs } from 'vue'
import Child from './components/child.vue'
// 基本类型
let num = ref<number>(0)
const handleChangeNum = () => {num.value++
}
// 响应式
provide('num', toRef(num))
// 非响应式
// provide('num', num.value)interface objType {name: stringage: number
}
// 引用类型
let dataObj = reactive<objType>({name: '测试',age: 12
})
const handleChangeData = () => {dataObj.age++
}
// 响应式
provide('dataObj', toRefs(dataObj))
// 非响应式
// provide('dataObj', dataObj)
</script>
<style lang='scss' scoped>
</style>
子组件
<template>
<div> son -page---{{ num }}</div>
<br>
dataObjSon===={{ dataObjSon.age }}
</template>
<script setup lang="ts" >
import { inject,Ref, ref } from 'vue'
let num = inject<Ref<number>>('num', ref(2))
console.log("====inject('num')--", num.value)
let dataObjSon = inject('dataObj')
console.log("====idataObjSon--", dataObjSon)
</script>
<style lang='scss' scoped>
</style>
相关文章:
Vue3 中使用provide和reject
1、provide 和reject 可以实现一条事件线上的 父传子,父传孙等;相比较 props emits 仅限与父子传参更方便,相较于pinia书写更简单,但是需要注意使用响应式,如果是非响应式的会导致页面更新不及时 父组件 <templat…...
大数据flink篇之一-基础知识
一、起源 2010至2014年间,由柏林工业大学、柏林洪堡大学和哈索普拉特纳研究所联合发起名Stratosphere的研究项目。2014年4月,项目贡献给Apache基金会,成为孵化项目。更名为Flink2014年12月,成为基金会顶级项目2015年9月ÿ…...
No140.精选前端面试题,享受每天的挑战和学习
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...
Oracle 11g_FusionOS_安装文档
同事让安装数据库,查询服务器信息发现操作系统是超聚变根据华为openEuler操作系统更改的自研操作系统,安装过程中踩坑不少,最后在超聚变厂商的技术支持下安装成功,步骤可参数该文。 一、 安装环境准备 1.1 软件下载 下载地址:…...
Linux驱动实现IO模型
在Linux系统分为内核态和用户态,CPU会在这两个状态之间进行切换。当进行IO操作时,应用程序会使用系统调用进入内核态,内核操作系统会准备好数据,把IO设备的数据加载到内核缓冲区。 然后内核操作系统会把内核缓冲区的数据从内核空…...
wsl2 更新报错问题解决记录
1、问题 win10 中安装的 wsl2,启动 docker desktop 时提示 wsl2 有问题: 于是点击推荐的地址连接到微软,下载 wsl2 的更新文件。之后运行,又报错: 更新被卡住。 2、解决方法 WinR 输入 cmd 打开命令行窗口&#x…...
突破算法迷宫:精选50道-算法刷题指南
前言 在计算机科学和编程领域,算法和数据结构是基础的概念,无论你是一名初学者还是有经验的开发者,都需要掌握它们。本文将带你深入了解一系列常见的算法和数据结构问题,包括二分查找、滑动窗口、链表、二叉树、TopK、设计题、动…...
玩转Mysql系列 - 第26篇:聊聊mysql如何实现分布式锁?
这是Mysql系列第26篇。 本篇我们使用mysql实现一个分布式锁。 分布式锁的功能 分布式锁使用者位于不同的机器中,锁获取成功之后,才可以对共享资源进行操作 锁具有重入的功能:即一个使用者可以多次获取某个锁 获取锁有超时的功能ÿ…...
linux 解压缩命令tar
Tar tar 命令的选项有很多(用 man tar 可以查看到),但常用的就那么几个选项,下面来举例说明一下: tar -cf all.tar *.jpg 这条命令是将所有.jpg 的文件打成一个名为 all.tar 的包。-c 是表示产生新的包,-f 指 定包的文件名。 …...
OpenAI ChatGPT API 文档之 Embedding
译者注: Embedding 直接翻译为嵌入似乎不太恰当,于是问了一下 ChatGPT,它的回复如下: 在自然语言处理和机器学习领域,"embeddings" 是指将单词、短语或文本转换成连续向量空间的过程。这个向量空间通常被称…...
Java常用类(二)
好久不见,因工作原因,好久没发文了,OldWang 回来了,持续更新Java内容!⭐ 不可变和可变字符序列使用陷阱⭐ 时间处理相关类⭐ Date 时间类(java.util.Date)⭐ DateFormat 类和 SimpleDateFormat 类⭐ Calendar 日历类 ⭐…...
Java获取给定月份的前N个月份和前N个季度
描述: 在项目开发过程中,遇到这样一个需求,即:给定某一月份,得到该月份前面的几个月份以及前面的几个季度。例如:给定2023-09,获取该月份前面的前3个月,即2023-08、2023-07、2023-0…...
网页资源加载过程
网页资源加载是指在浏览器中访问一个网页时,浏览器如何获取和显示网页内容的过程。这个过程通常分为以下几个步骤: DNS 解析: 当用户在浏览器中输入一个网址(例如,https://www.example.com),浏览…...
使用git config --global设置用户名和邮件,以及git config的全局和局部配置
文章目录 1. 文章引言2. 全局配置2.1 命令方式2.2 配置文件方式 3. 局部配置3.1 命令方式3.2 配置文件方式 4. 总结 1. 文章引言 我们为什么要设置设置用户名和邮件? 我们在注册github,gitlab等时,一般使用用户名或邮箱: 这个用户…...
【C语言】21-指针-3
目录 1. 指针数组1.1 什么是指针数组1.2 如何定义指针数组1.3 如何使用指针数组2. 多重指针2.1 二重指针的定义2.2 二重指针的初始化与赋值2.3 二重指针的使用3. 指针常量、常量指针、指向常量的常指针3.1 概念3.2 const pointer3.3 pointer to a constant3.3.1 (pointer to a …...
解决craco启动react项目卡死在Starting the development server的问题
现象: 原因:craco.config.ts配置文件有问题 经过排查发现Dev开发模式下不能有splitChunk的配置, 解决办法: 加一个生产模式的判断,开发模式不加载splitChunk的配置,仅在生产模式才加载 判断条件代码&#…...
常见的密码学算法都有哪些?
密码学算法是用于保护信息安全的数学方法和技术。它们可以分为多个类别,包括对称加密、非对称加密、哈希函数和数字签名等。以下是一些常见的密码学算法: 1、对称加密算法: AES(高级加密标准):一种广泛使…...
云安全【阿里云ECS攻防】
关于VPC的概念还请看:记录一下弹性计算云服务的一些词汇概念 - 火线 Zone-安全攻防社区 一、初始化访问 1、元数据 1.1、SSRF导致读取元数据 如果管理员给ECS配置了RAM角色,那么就可以获得临时凭证 如果配置RAM角色 在获取ram临时凭证的时候ÿ…...
TBSS数据分析
tbss分析基本流程: 步骤一,指标解算:求解出FA,MD,AD,RD指标 #!/bin/bash #基于体素的形态学分析VBA path/media/kui/Passport5T/DATA_help/TBSS/row_data mkdir ${path}/Results_DTI_tbss mkdir ${path}/R…...
【单调队列】 239. 滑动窗口最大值
239. 滑动窗口最大值 解题思路 计算每一个滑动窗口的最大值 关键在于借助单调队列实现窗口对于单调队列 尾部添加元素 头部删除元素添加元素操作:从尾部开始循环对比 删除比当前元素小的元素获取最大值元素 直接获取头部元素删除元素操作 直接删除头部元素 class…...
长期跳健身操,颈椎会过度屈伸损伤吗
健身爱好者长期跳健身操、跟随节奏做颈部屈伸动作,是运动核心场景,却不知长期如此会让颈 “过度屈伸”,积累屈伸与爆发发力复合损伤。健身操中部分动作要求颈部快速屈伸、左右摆动,爆发性发力导致颈部肌肉与韧带承受瞬间张力&…...
照着用就行:全学科适配的降AIGC工具 千笔·专业降AI率智能体 VS PaperRed 一站式解决降重难题
随着AI技术的迅猛发展,学术写作中对AI生成内容的识别能力也在不断提升,许多学生和研究者发现,原本依赖AI辅助撰写的论文,如今在查重系统中频频被标记出高AIGC率,甚至影响最终成绩。这种现象不仅让许多人措手不及&#…...
MediaPipe TouchDesigner GPU视觉插件实战:从零构建实时交互应用的完整指南
MediaPipe TouchDesigner GPU视觉插件实战:从零构建实时交互应用的完整指南 【免费下载链接】mediapipe-touchdesigner GPU Accelerated MediaPipe Plugin for TouchDesigner 项目地址: https://gitcode.com/gh_mirrors/me/mediapipe-touchdesigner 你是否厌…...
别再死记硬背了!用ChatGPT/Claude帮你理解AIGC面试题(附Prompt)
用AI对话引擎拆解AIGC面试核心:从死记硬背到深度理解的范式转移 在准备AIGC算法面试时,大多数候选人都会陷入"八股文"的泥潭——机械记忆概念定义却难以理解技术本质。这种学习方式不仅效率低下,更无法应对面试官深入的技术追问。本…...
单阶段检测的王者:YOLO核心技术解析与多场景应用实战指南
导读:在计算机视觉的浩瀚星空中,YOLO (You Only Look Once) 无疑是最耀眼的那颗星。自2015年横空出世以来,它凭借“单阶段检测”的独特哲学,将速度与精度完美统一,彻底终结了Two-Stage算法在实时领域的统治地位。站在2…...
Detectron2特征图热力可视化实战:从Faster R-CNN到自定义网络
1. 为什么需要特征图热力可视化 当你训练一个目标检测模型时,有没有遇到过这样的困惑:模型在某些场景下表现很好,但在另一些场景却频频出错?作为算法工程师,我们往往只能看到最终的检测结果,却不知道模型内…...
MedGemma 1.5效果对比:在线大模型vs本地MedGemma在医学术语解释准确性评测
MedGemma 1.5效果对比:在线大模型vs本地MedGemma在医学术语解释准确性评测 1. 引言:为什么需要本地医疗AI助手? 想象一下,你或者家人身体不舒服,想在网上查查症状,结果搜出来一堆广告、营销号文章&#x…...
[特殊字符] Nano-Banana参数详解:LoRA权重对部件排布影响的实证分析
Nano-Banana参数详解:LoRA权重对部件排布影响的实证分析 1. 项目简介 Nano-Banana是一款专为产品拆解和平铺展示风格设计的轻量化文本生成图像系统。这个项目的核心价值在于深度融合了专属的Turbo LoRA微调权重,专门针对Knolling平铺、爆炸图、产品部件…...
OpenClaw团队协作版:ollama-QwQ-32B支持多用户任务隔离实践
OpenClaw团队协作版:ollama-QwQ-32B支持多用户任务隔离实践 1. 为什么我们需要团队协作版的OpenClaw 去年我带领一个5人内容团队时,遇到了一个典型问题:每个人都想用AI自动化处理日常工作,但共享同一套系统会导致文件混乱、任务…...
AI 辅助开发实战:高效完成深度学习毕业设计项目的全流程指南
最近在帮学弟学妹们看深度学习毕业设计,发现大家普遍被几个问题卡住:要么是代码跑不起来,环境报错一片红;要么是模型训了半天,准确率死活上不去;好不容易训出个能看的模型,又不知道怎么部署展示…...
