关于vue3中响应式依赖注入provide/inject

关于# vue3中响应式依赖注入

场景:适合单组件(多层嵌套组件),解决父组件的响应式数据能够传递给所有子组件(包括孙子组件及以下)
优点:数据同步更新,并同步渲染视图,耦合逻辑处理更容易处理,更好的开发体验,推荐provide/inject 而非 vuex(繁琐)

// 父组件 script setup
// 创建响应式数据
const parentFormData = ref({});
// 依赖数据 - 定义 provide readonly不允许子组件直接修改 parentFormData,以免混乱
provide('parentFormData', readonly(parentFormData));// 修改依赖变量 parentFormData 的方法
const changeReactivityReadonlyData = (val: any) => {// 合并对象Object.assign(parentFormData.value, val);
};
// 依赖函数
provide('changeParentFormData', changeReactivityReadonlyData);const formData = reactive<T>({id: '',name: ''
})
// 传递 - 响应式, reactive 需要转一层解构才能保持响应式
changeReactivityReadonlyData({ ...toRefs(formData) });// 子组件  script setup
// 定义any 是为了防止 parentFormData.value ts提示,可以研究一下 InjectionKey 的做法
const parentFormData: any = inject('parentFormData');
const changeParentFormData: any = inject('changeParentFormData');
const subFormData = ref<T>({age: ''
})// 传递响应式, ref 需要 .value 在转一层, 保持响应式
changeParentFormData(toRefs(formData.value));

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

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

相关文章

一 OpenCV中的数据类型

1. cv::Mat 2. cv::Point 主要用来表示二维点&#xff0c;也有表示三维点的模板类型&#xff1b; cv::Point p(int, int) 最常用 ① cv::Point_<T> ② cv::Point2i cv::Point_<int> ③ cv::Point2f cv::Point_<float> ④ cv::Point2d …

算法:只出现一次的数字(位运算:异或运算)

异或运算 时间复杂度 O(n) 空间复杂度 O(1) /*** param {number[]} nums* return {number}*/ var singleNumber function (nums) {let item nums[0]if (nums.length > 1) {for (let i 1; i < nums.length; i) {// 将10进制转成2进制进行异或运算&#xff08;相同得0&…

window安装DockerDesktop无法使用host网络模式解决方案

window安装DockerDesktop无法使用host网络模式解决方案 1. 现象 最近用windows安装DockerDeskTop发现使用windows版的docker启动nginx的时候无法使用host模式&#xff0c;启动fastdfs镜像&#xff08;本质上来说是nginx&#xff09;时&#xff0c;指定host网络是&#xff0c;…

CB400X即将停产?NX400上线,本田最新的外观设计直接就国产了?

NX500 之前米兰车展的时候给大家分享过本田对于500系列的升级&#xff0c;并且宣布NX500代替CB500X&#xff0c;采用了全新的外观设计&#xff0c;没有看过的小伙伴可以查阅下之前的文章内容&#xff0c;不过最新的工信部的信息&#xff0c;可以看到NX500的外观设计应用到了CB…

算法:校验二叉树是否相同

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、问题描述 二、递归算法 三、字符串比较法 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、问题描述 有两棵二叉树&#xff0c…

光栅化渲染:光栅化算法实现

光栅化是将图元转换为二维图像的过程。 该图像的每个点都包含颜色和深度等信息。 因此&#xff0c;对图元进行光栅化由两部分组成。 第一个是确定窗口坐标中整数网格的哪些方格被图元占据。 第二个是为每个这样的方块分配颜色和深度值。 &#xff08;OpenGL 规范&#xff09; N…

CTD测试流程

连接 连接17Plus&#xff0c;用usb转232线&#xff0c;db9公针2、3分别接Data I/O的2、3。DB9的5接Data I/O的1。尼龙塞子打开状态。不用闭合。 软件连接 打开SeaTermAF V2&#xff0c;注意打开前先把串口插上&#xff0c;否则软件读不到串口。如果读不到&#xff0c;就在插…

C/C++ 快乐数: 编写一个算法来判断一个数n是不是快乐数

题目&#xff1a; 编写一个算法来判断一个数n是不是快乐数。 快乐数的定义&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果这个过…

使用不同的颜色映射绘制热力图Seaborn

使用不同的颜色映射绘制热力图 一、使用 Seaborn 库创建热力图二、cmap关于其他颜色的设置三、自己设置颜色映射 一、使用 Seaborn 库创建热力图 选择Seaborn颜色官网 使用 Seaborn 库创建热力图&#xff0c;你可以使用 seaborn.heatmap() 函数。下面是一个示例代码&#xf…

网络基础(七):传输层协议介绍

目录 一、TCP协议&#xff08;传输控制协议&#xff09; 1、TCP协议介绍 2、TCP协议特性 3、TCP报文格式 4、TCP的三次握手 4.1TCP三次握手的概念 4.2TCP三次握手流程图 4.3 TCP三次握手阐释说明 5、TCP的四次挥手 5.1TCP四次挥手的概念 5.2TCP四次挥手的流程图 5.…

【C语言】RDMACM、Verbs API与epoll一起使用的示例

一、epoll介绍 epoll是Linux内核为处理大批量文件描述符而作了改进的poll&#xff0c;是Linux下多路复用IO接口select/poll的增强版本&#xff0c;它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率。 以下是epoll的主要使用方法和优点&#xff1a; epo…

百度智能云解析DNS python版api ddns实现2023最新

发现之前有网友发的过期了 写的也很不好用。 百度智能云解析DNS python版api ddns实现2023-12最新 import hmac import time import requests #把*****星号改成自己的就行了host"dns.baidubce.com" yourdomin"****.com" AK*****************************…

jsp+servlet+图书交流平台 有filter过滤器

在线图书推荐与交流平台 随着数字化的进展和人们对持续学习的追求&#xff0c;在线资源变得越来越受欢迎。对于众多读者来说&#xff0c;找到合适的书籍和与其他读者交流阅读体验是非常有价值的。为了满足这一需求&#xff0c;我们提出了一个在线图书推荐与交流平台的设计。此…

使用MIB builder自定义物联网网关的MIB结构

文章目录 物联网网关初识&#xff08;了解即可&#xff09;IoT的通用MIB库结构MIB Builder开发流程指导问题总结子叶没所属分组值范围不为0 物联网网关初识&#xff08;了解即可&#xff09; 网关又称网间连接器、协议转换器。简单说&#xff0c;物联网网关是一台智能计算机&a…

【八】python装饰器模式

文章目录 8.1 装饰器模式简介8.2 装饰器模式作用8.3 装饰器模式构成8.3.1 装饰器模式包含以下几个核心角色&#xff1a;8.3.2 UML类图 8.4 装饰器模式python代码实现8.4.1 基本装饰器的使用8.4.2 多个装饰器的执行顺序8.4.3 带返回值的装饰器的使用8.4.4 装饰器模式-关联类模式…

深度学习——第3章 Python程序设计语言(3.5 Python类和对象)

3.5 Python类和对象 目录 1. 面向对象的基本概念 2. 类和对象的关系 3. 类的声明 4. 对象的创建和使用 5. 类对象属性 6. 类对象方法 7. 面向对象的三个基本特征 8. 综合案例&#xff1a;汉诺塔图形化移动 1.1 面向对象的基本概念 1.1.1 对象&#xff08;object&#x…

MySQL数据库,约束

关于约束 数据完整性是指数据的精确性和可靠性。防止数据库中存在不符合语义规定的数据和防止因错误信息的输入输出造成无效操作或无效信息。 SQL规范以约束的方式对表数据进行额外的条件限制。 约束是表级的强制规定。可以在创建表时规定约束&#xff0c;或者在表创建之后通…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】SLAM(基础篇)(五)

目录 前言 几个相关概念 双目视惯雷达SLAM 相关工作 系统综述 视觉前端

排序算法---希尔排序

1. 基本思想 希尔排序是插入排序的一种&#xff0c;它与直接插入排序不同的是&#xff0c;它会优先比较距离较远的元素&#xff0c;因此希尔排序又被称为“缩小增量排序”。希尔排序的实现思路是&#xff1a;先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序&…