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…...
如何在MATLAB中免费实现亚像素级变形测量:Ncorr 2D完整指南 [特殊字符]
如何在MATLAB中免费实现亚像素级变形测量:Ncorr 2D完整指南 🚀 【免费下载链接】ncorr_2D_matlab 2D Digital Image Correlation Matlab Software 项目地址: https://gitcode.com/gh_mirrors/nc/ncorr_2D_matlab 你是否曾为材料变形测量而烦恼&am…...
别再瞎找了!AI论文平台2026最新测评与推荐
2026年真正好用的AI论文平台,核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…...
Linux文件操作命令与文件权限
1.创建一个新文件2.查看显示文件3.more命令类似 cat,不过会以一页一页的形式显示4.head命令显示文件的头部内容5.tail命令可用于查看文件的内容的后10行6.文件的压缩与解压7.tar命令用来建立8.zip命令用于压缩文件9.unzip命令用于解压缩zip文件10.文件属性...
别再死磕EKF了!用ESKF搞定无人机姿态估计,避开‘大数吃小数’的坑
无人机姿态估计实战:用ESKF避开EKF的数值陷阱 四轴飞行器在高速翻滚时,IMU数据突然出现剧烈抖动——这是去年调试自主无人机时遇到的真实场景。当时使用传统EKF算法,姿态解算在极端机动下频繁发散,直到切换到误差状态卡尔曼滤波&a…...
vLLM-v0.17.1GPU算力适配:华为昇腾CANN 7.0与vLLM对接可行性验证
vLLM-v0.17.1 GPU算力适配:华为昇腾CANN 7.0与vLLM对接可行性验证 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库,由加州大学伯克利分校的天空计算实验室(Sky Computing Lab)最初开发,现已发展成为学术界和工业…...
Z-Image-Turbo-辉夜巫女实战落地:高校数字艺术课程AI绘图实验课教案设计
Z-Image-Turbo-辉夜巫女实战落地:高校数字艺术课程AI绘图实验课教案设计 1. 项目背景与教学价值 在数字艺术教育领域,AI绘图技术正逐渐成为重要的教学工具。Z-Image-Turbo-辉夜巫女是基于Z-Image-Turbo模型的Lora版本,专门针对"辉夜巫…...
【仅限首批尝鲜者】Python 3.15 JIT真实生产环境对比:Django API吞吐+22%,但Flask微服务却降15%?
第一章:Python 3.15 JIT编译器的架构演进与设计哲学Python 3.15 引入了实验性但高度结构化的内置 JIT 编译器(代号 “Tartan”),标志着 CPython 首次将即时编译能力深度集成至解释器核心,而非依赖外部工具链。其设计哲…...
10分钟搭建FunASR智能语音点餐系统:餐饮服务革命性升级指南
10分钟搭建FunASR智能语音点餐系统:餐饮服务革命性升级指南 FunASR是一个开源的端到端语音识别工具包,提供了SOTA预训练模型,能够帮助开发者快速构建语音交互应用。本文将详细介绍如何在10分钟内利用FunASR搭建智能语音点餐系统,…...
MangoHud源码静态分析报告:潜在问题列表
MangoHud源码静态分析报告:潜在问题列表 【免费下载链接】MangoHud A Vulkan and OpenGL overlay for monitoring FPS, temperatures, CPU/GPU load and more. Discord: https://discordapp.com/invite/Gj5YmBb 项目地址: https://gitcode.com/gh_mirrors/ma/Mang…...
从零开始:使用TypeScript快速构建浏览器RPG游戏的终极指南
从零开始:使用TypeScript快速构建浏览器RPG游戏的终极指南 【免费下载链接】RPG-JS Framework to create an RPG or MMORPG (with the same code) in the browser with Typescript 项目地址: https://gitcode.com/gh_mirrors/rp/RPG-JS 想要在浏览器中创建令…...
