computed拦截v-model

一,问题

在父组件和子组件中都使用v-model会打破单项数据流。


二,方法

基于上述问题采用computed拦截v-model

<!-- 父组件 -->
<template><div><my-component v-model="form"></my-component></div>
</template>
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref } from "vue";const form = ref({name:'coderkey',age:18,sex:'男'
})
</script>
<!-- 子组件 -->
<template><div><el-input v-model="form.name"></el-input><el-input v-model="form.age"></el-input><el-input v-model="form.sex"></el-input></div>
</template>
<script setup>
import { computed } from "vue";const props = defineProps({modelValue: {type: Object,default: () => {},},
});
// const emit = defineEmits(["update:modelValue"]);
const emit = defineEmits();const form = computed({get() {return props.modelValue;},set(newValue) {console.log('属性改变了')emit("update:modelValue", newValue);},
});
</script>

三,注意

最后发现问题:form.xxx = xxx时,并不会触发computedset,只有form = xxx时,才会触发set
解决方法:用watch监听器或者用Proxy代理对象。


四,Proxy + computed拦截v-model的对象

<!-- 父组件 -->
<template><div><my-component v-model="form"></my-component></div>
</template>
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref } from "vue";const form = ref({name: "coderkey",age: 18,sex: "男",
});
</script>
<!-- 子组件 -->
<template><div><el-input v-model="form.name"></el-input><el-input v-model="form.age"></el-input><el-input v-model="form.sex"></el-input></div>
</template>
<script setup>
import { computed } from "vue";const props = defineProps({modelValue: {type: Object,default: () => {},},
});// const emit = defineEmits(["update:modelValue"]);
const emit = defineEmits();
const form = computed({get() {return new Proxy(props.modelValue, {get(target, key) {return Reflect.get(target, key);},set(target, key, value) {emit("update:modelValue", {...target,[key]: value,});return true;},});}
});
</script>

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

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

相关文章

Flutter-Engine 的定制实践:Text 绘制流程浅析及自定义underline的间距

前言 最近工作中处理的文本相关的内容较多&#xff0c;不论是刁钻的需求还是复杂的问题&#xff0c;最终都会引向一点“Flutter中的文本是如何绘制的&#xff1f;”。 这里我将以“调整下划线与文字的间距”为切入点并结合自定义Engine&#xff0c;记录一下我的个人分析和实践…

[A-14]ARMv8/ARMv9-Memory-内存模型的类型(Device Normal)

ver0.1 [看前序文章有惊喜。] 前言 前面花了很大的精力把ARM构建的VMSA中的几个核心的议题给大家做了介绍,相信大家已经能够理解并掌握ARM的内存子系统的工作原理大致框架。接下来我们会规划一些文章,对ARM内存子系统的一些细节做一下介绍,使ARM的内存子系统更加的丰满。本…

可编辑31页PPT | 智慧业务中台规划建设与应用总体方案

荐言分享&#xff1a;随着数字化转型的深入&#xff0c;企业面临着前所未有的挑战与机遇。为了高效整合内外部资源&#xff0c;快速响应市场变化&#xff0c;提升业务创新能力&#xff0c;智慧业务中台应运而生。智慧业务中台作为企业数字化转型的核心基础设施&#xff0c;旨在…

深入理解Docker,从入门到精通-Part1(基础使用)

一、Docker基本概念 Docker架构 基本组件的介绍 Docker Client 是用户界面&#xff0c;它支持用户与Docker Daemon之间通信 Docker Daemon Docker最核心的后台进程&#xff0c;运行于主机上&#xff0c;处理服务请求 Docker registry是中央registry&#xff0c;支持拥有公有与…

在macOS的多任务处理环境中,如何平衡应用的性能与用户体验?这是否是一个复杂的优化问题?如何优化用户体验|多任务处理|用户体验|应用设计

目录 一 多任务处理与应用性能 1. macOS中的多任务处理机制 2. 性能优化的基本策略 二 用户体验的关键要素 1. 响应速度 2. 界面友好性 3. 功能的直观性 三 平衡性能与用户体验的策略 1. 资源管理 2. 优化数据加载 3. 使用合适的线程模型 4. 实时监测和调整 四 使…

lvm逻辑卷管理

分区类型&#xff1a; 主分区扩展分区逻辑分区系统引导分区&#xff1a;存放系统的引导文件和linux的内核文件swap分区&#xff1a;交换分区&#xff0c;系统的物理内存不足时&#xff0c;从一些长时间未运行的程序当中释放一部分内存&#xff0c;释放出来的内存保存到swap分区…

openai api 文件分析/联网/画图代码示例

目的 使用https://4o.zhangsan.shop的API进行文件分析等功能。 完整代码 # pip install openai0.28 # 注意下方代码必须使用该版本 import openaidef query_gpt4(question):openai.api_key "sk-aQR1wbTsLpySgJDq3fFb026c225a44C8924750C1B67bCeD5"openai.api_ba…

Android编译环境构建(二)(可用于物理机、虚拟机、容器化Jenkins环境)

文章目录 需求环境要求文件下载Gradle Version:7.5cmdline-tools至此普通物理环境的Android编译环境已部署完毕 部署maven(可选)Jenkins配置Android构建环境 说明&#xff1a; 物理环境&#xff1a;物理机、虚拟机等 容器化环境&#xff1a;docker等 需求 Gradle Version:7.5 …

WPF+MVVM案例实战(十)- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件 打开 Wpf_Examples 项目,在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ,修改 Us…

Spring Boot解决 406 错误之返回对象缺少Getter/Setter方法引发的问题

目录 前言1. 问题背景2. 问题分析2.1 检查返回对象 3. 解决方案3.1 确保Controller返回Result类型3.2 测试接口响应 4. 原理探讨5. 常见问题排查与优化建议结语 前言 在Spring Boot开发中&#xff0c;接口请求返回数据是系统交互的重要环节&#xff0c;尤其在开发RESTful风格的…

FineReport 单元格的特殊应用场景

1、实现鼠标点击的行变色 创建报表 1.1、鼠标点击某行时该行高亮显示 JavaScript 代码如下&#xff1a; _g().addEffect(highlightRow, {color: red,trigger: mousedown, });结果 1.2、鼠标悬浮某行时该行变色&#xff0c;离开时恢复 其他一样&#xff0c;就改代码 JavaScr…

MacOS的powermetrics命令查看macbook笔记本的耗能情况,附带查看ANE的工作情况

什么是 powermetrics&#xff1f; powermetrics 是 macOS 系统自带的一个命令行工具&#xff0c;用于收集和分析系统能源消耗数据。通过它&#xff0c;我们可以深入了解 Mac 的硬件性能、软件行为以及能源使用情况&#xff0c;从而优化系统配置&#xff0c;提高电池续航时间。…

系统架构师-一文搞定架构风格

架构风格分类 五大架构风格简介子风格数据流风格面向数据流&#xff0c;按照一定的顺序从前向后执行程序批处理、管道-过滤器调用/返回风格构件与构件之间存在相互调用的关系&#xff0c;一般是显示的调用主程序/子程序、面向对象、层次结构&#xff08;层次型架构风格&#x…

第13课 数据处理

数轴是一维的&#xff0c;平面直角坐标系是二维的。单个学生的成绩是一维的&#xff0c;全班同学的成绩是二维的。 Python是强大的数据处理工具&#xff0c;可以处理多种数据文件。最基础的数据文件包括一维数据、二维数据、CSV格式数据文件。 这节课重点学习一维数据、二维数据…

3D人体建模的前沿探索:细数主流模型与技术进展

文章目录 一、前言二、主要内容SMPL文献内容&#xff1a;文献信息&#xff1a; SMPLX文献内容&#xff1a;文献信息&#xff1a; STAR文献信息&#xff1a; SCAPE文献内容&#xff1a;文献信息&#xff1a; BfSNet3. 文献内容&#xff1a; SMPLR文献内容&#xff1a;文献信息&a…

闪存学习_1:Flash-Aware Computing from Jihong Kim

闪存学习_1&#xff1a;Flash-Aware Computing from Jihong Kim 前言一、Storage Media&#xff1a;NAND Flash Memory1、概念2、编程和擦除操作3、读操作4、异地更新操作&#xff08;Out-Place Update&#xff09;5、数据可靠性6、闪存控制器&#xff08;SSD主控&#xff09;7…

【真题笔记】15年系统架构设计师要点总结

【真题笔记】15年系统架构设计师要点总结 分布式数据库中各种透明RAID 5IPv6 IPv4电子商务系统项目配置管理IPO图&#xff08;输入加工输出图&#xff09;桥接模式的UML图面向对象设计原则软件测试 在15年真题练习中&#xff0c;对错题模棱两可的考点进行重点记录与内容延申。…

软件测试基础知识总结

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 基础篇 1. 什么是软件测试&#xff1f; 软件测试&#xff08;Software Testing&#xff09;的经典定义是&#xff1a;在规定的条件下对程序进行操作&#xff…

「微服务」持续测试如何做?

如今&#xff0c;软件开发对于速度和灵活性的持续追求&#xff0c;催生了各种超越传统界限的方法和实践。而作为现代 DevOps 实践的基石&#xff0c;持续测试的出现与发展&#xff0c;正好满足了加速软件交付的需求。下面&#xff0c;我将和您探讨持续测试的最新发展&#xff0…

智能家居10G雷达感应开关模块,飞睿智能uA级别低功耗、超高灵敏度,瞬间响应快

在当今科技飞速发展的时代&#xff0c;智能家居已经逐渐成为人们生活中不可或缺的一部分。从智能灯光控制到智能家电的联动&#xff0c;每一个细节都在为我们的生活带来便利和舒适。而在众多智能家居产品中&#xff0c;10G 雷达感应开关模块以其独特的优势&#xff0c;正逐渐成…