当前位置: 首页 > news >正文

关于Vue的子组件改变父组件传来的值

一、组件直接传值

大家都知道父子组件传值的方案,有以下几个,不再详细敖述

  • Props:父组件向子组件传递数据

  • $emit:子组件通过自定义事件向父组件传递数据

    • .sync修饰符:一个方便且强大的工具,可以简化父子组件之间的双向数据绑定,用于创建双向绑定prop的修饰符,它允许子组件更新父组件的prop值,实现父子组件之间的双向数据同步(如果不想使用事件),.sync修饰符的工作原理主要基于Vue.js的事件机制和prop传递机制

  • Vuex进行状态管理:应用提供了一种高效、清晰的状态管理方案。通过集中式存储管理、可预测的状态变化、组件间的解耦以及方便的调试工具等特性,Vuex极大地简化了应用程序的状态管理。

  • provide/inject:是Vue.js中一种强大的机制,用于实现跨组件的数据共享和方法传递。它们能够有效地避免繁琐的props传递,提升组件间通信的灵活性和代码的可维护性。然而,在使用时需要注意响应性问题、命名冲突以及性能开销等细节。

  • Bus事件:Bus事件适用于简单的场景或临时解决方案,如果在组件销毁后没有移除事件监听器,可能会导致内存泄漏。因此,在组件销毁之前,应该使用$off方法来移除事件监听器。

  • refs或parent/$children访问组件实例,父组件可以通过$refs直接访问子组件的数据或方法;父组件可以通过children访问子组件,子组件可以通过parent访问父组件,从而实现父子组件之间的数据传递。但这种方式会破坏组件的封装性和独立性,因此应尽量避免过多使用。

二、 子组件改变父组件的值

子组件通过自定义事件向父组件传递数据,来让父组件改变值,是正规使用,,其中.sync修饰符同步父组件值,是综合版本,不过有以下两种情况是不被推荐,尤其直接改变非对象属性

  • 子组件直接改变了父组件里面的对象:因为是对象里面的属性,没有直接触发该对象属性的 setter,只是在修改对象内部的引用,而这个内部引用并没有被 Vue 的响应式系统所追踪。因此,从技术上讲,Vue 不知道这个内部属性已经被修改,也就不会触发视图更新,也就不会报错。(不会报错)
  • 直接修改父组件非对象属性就会直接触发 setter引发报错Avoid mutating a prop...(报错)

 父组件

<template><div><child-component :parentMessage="parentMessage" :form="form" @setParentMessage="setParentMessage" :form.sync="form"></child-component></div>
</template><script>
export default {data() {return {parentMessage: 'Hello from parent!',form:{user:'默认'}};},methods: {setParentMessage(msg) {this.parentMessage = msg//推荐}}
}
</script>

子组件

<template><div><p @click="sendUpdate">{{ parentMessage }}</p></div>
</template><script>
export default {props: {parentMessage: String,form: Object},methods: {sendUpdate(data) {this.form.us='不报错'//只是在修改对象内部的引用,而这个内部引用并没有被 Vue 的响应式系统所追踪。因此,从技术上讲,Vue 不知道这个内部属性已经被修改,也就不会触发视图更新,也就不会报错。this.parentMessage='报错'//Avoid mutating a prop...//推荐:子组件通过自定义事件向父组件传递数据,来让父组件改变值,是正规使用this.$emit('setParentMessage', '自定义事件传递数据');//推荐:.sync修饰符同步父组件值const form = { ...this.form };form.us = '.sync修饰符同步父组件值';this.$emit('update:form', form);//当然这样做可能会使代码变得难以理解和维护,特别是在大型应用程序中。//更好的做法是遵循Vue的最佳实践,即不要直接修改prop。this.form.us = '.sync修饰符同步父组件值';this.$emit('update:form', this.form);}}
}
</script>

相关文章:

关于Vue的子组件改变父组件传来的值

一、组件直接传值 大家都知道父子组件传值的方案&#xff0c;有以下几个&#xff0c;不再详细敖述 Props&#xff1a;父组件向子组件传递数据 $emit&#xff1a;子组件通过自定义事件向父组件传递数据 .sync修饰符&#xff1a;一个方便且强大的工具&#xff0c;可以简化父子组…...

jvm排查问题-实践追踪问题 与思路--堆内堆外内存泄漏排查方针

概述 排查问题的一般思路是:现象 ——> 直接原因 ——>根本原因。 从问题现象出发,可以分为 应用逻辑问题、资源使用问题、虚拟机异常: 应用逻辑可能导致报错增加、死锁、程序退出等;资源问题主要集中在CPU上升和内存上升(OOM Kill);虚拟机问题通常包括GC问题、进…...

网络层协议--ip协议

目录 引言 IP协议 协议头格式 16位标识与3位标志与13位片偏移讲解 网段划分(重要) DHCP技术 CIDR技术 特殊的IP地址 广播主机 IP地址的数量限制 私有IP地址和公网IP地址 路由&#xff1a;在复杂的网络结构中, 找出一条通往终点的路线 简单认识路由器 路由表生成算…...

【总结整理】 神经网络与深度学习 邱锡鹏 课后习题答案 扩展阅读链接

本文主要针对神经网络神经网络邱锡鹏 2~8 章的课后习题进行理解的过程中&#xff0c;搜索到的讲的会比较透彻的链接整理。适合有一定基础但是想了解更细的人阅读。 主要参考书籍 首先是本书pdf可在神经网络与深度学习获取&#xff1b; 主要参考的课后习题答案为nndl/solution…...

使用 Three.js 创建一个 3D 人形机器人仿真系统

引言 在这篇文章中&#xff0c;我们将探讨如何使用 Three.js 创建一个简单但有趣的 3D 人形机器人仿真系统。这个机器人可以通过键盘控制进行行走和转向&#xff0c;并具有基本的动画效果。 技术栈 HTML5Three.jsJavaScript 实现步骤 1. 基础设置 首先&#xff0c;我们需要…...

图像修复和编辑大一统 | 腾讯北大等联合提出BrushEdit:BrushNet进阶版来了

文章链接&#xff1a;https://arxiv.org/pdf/2412.10316 项目链接&#xff1a;https://liyaowei-stu.github.io/project/BrushEdit 亮点直击 提出了BrushEdit&#xff0c;这是先前BrushNet模型的高级迭代版本。BrushEdit通过开创基于修复&#xff08;inpainting&#xff09;的图…...

【hackmyvm】Adroit靶机wp

tags: HMVjava反编译SQL注入 1. 基本信息^toc 文章目录 1. 基本信息^toc2. 信息收集3. java反编译4. sql注入5. 解密密码6. 提权 靶机链接 https://hackmyvm.eu/machines/machine.php?vmAdroit 作者 alienum 难度 ⭐️⭐️⭐️⭐️️ 2. 信息收集 ┌──(root㉿kali)-[~] └…...

【Python运维】自动化备份与恢复系统的实现:Python脚本实战

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着信息化进程的加速,数据的重要性日益增加,数据丢失的风险也随之增加。为了保证数据安全,定期备份和及时恢复数据是必不可少的操作。本…...

Goland 安装与使用

GoLand安装 官方网址&#xff1a; JetBrains GoLand&#xff1a;不只是 Go IDE 1. 进入官网&#xff0c;点击下载&#xff1a; ​ 2. 如下图一步步安装 ​ ​ ​ ​ ​ 3. 如下图一步步安装...

vue2 升级为 vite 打包

VUE2 中使用 Webpack 打包、开发&#xff0c;每次打包时间太久&#xff0c;尤其是在开发的过程中&#xff0c;本文记录一下 VUE2 升级Vite 步骤。 安装 Vue2 Vite 依赖 dev 依赖 vitejs/plugin-vue2": "^2.3.3 vitejs/plugin-vue2-jsx": "^1.1.1 vite&…...

FreeSwitch中启用WebRTC

在FreeSwitch中启用WebRTC需要进行一系列配置。以下是详细的步骤&#xff1a; 1. 安装必要的依赖&#xff1a; 确保安装了支持WebRTC的依赖库&#xff0c;如libsrtp。 2. 配置SIP Profile&#xff1a; 编辑 conf/sip_profiles/internal.xml 文件&#xff0c;添加或修改以下内…...

R语言的数据类型

标题&#xff1a;《探索R语言数据类型的奥秘》 引言&#xff1a; 在统计学和数据分析的世界里&#xff0c;R语言无疑是一颗璀璨的明星。它以其强大的数据处理能力和丰富的图形展示功能而受到广泛欢迎。然而&#xff0c;要熟练掌握并高效使用R语言&#xff0c;深入了解其数据类…...

基于UNET的图像分类

网络架构 UNet网络是一种革命性的图像分割架构,在图像分类任务中同样展现出卓越的性能。其独特的设计巧妙地平衡了全局信息捕捉和精细细节保留的需求,特别适合处理需要高度精确定位的任务。 UNet的核心设计理念体现在其 对称的编码器-解码器结构 中。这种结构不仅实现了高效…...

css文字折行以及双端对齐实现方式

使用flex布局后&#xff0c;文字超出容器部分不会自动折行了。实现代码如下&#xff1a; <el-row><el-col :span"24"><span class"label">姓名</span><span class"content">{{name}}</span></el-col>…...

华为云语音交互SIS的使用案例(文字转语音-详细教程)

文章目录 题记一 、语音交互服务&#xff08;Speech Interaction Service&#xff0c;简称SIS&#xff09;二、功能介绍1、实时语音识别2、一句话识别3、录音文件识别4、语音合成 三、约束与限制四、使用1、API2、SDK 五、项目集成1、引入pom依赖2、初始化 Client1&#xff09;…...

设计一个监控摄像头物联网IOT(webRTC、音视频、文件存储)

前言&#xff1a; 设计一个完整的 监控摄像头物联网 IoT 平台 涉及 视频直播和点播、WebRTC 和 文件存储模块&#xff0c;可以分为以下几个主要部分&#xff1a;摄像头设备、服务端处理、Web 前端、视频流存储和回放。以下是结合这些技术的一个具体完整流程设计&#xff0c;涵盖…...

学习笔记(prism--视频【WPF-prism核心教程】)--待更新

《一》框架介绍 prism是一个用于WPF…和winUI中构建的松散耦合&#xff0c;可维护和可测试的应用程序框架。帮助WPF开发人员以简化编写&#xff0c;维护和扩展来设计应用程序。 优点&#xff1a;遵循特定的约定&#xff0c;可自动将view/ViewModel建立DataContext的关系&#…...

Kafka无锁设计

前言 在分布式消息队列系统中,Kafka 的无锁设计是其高吞吐量和高并发的核心优势之一。通过避免锁的竞争,Kafka 能够在高并发和大规模的生产环境中保持高效的性能。为了更好地理解 Kafka 的无锁设计,我们首先对比传统的队列模型,然后探讨 Kafka 如何通过无锁机制优化生产者…...

【GO基础学习】gin框架路由详解

文章目录 gin框架路由详解&#xff08;1&#xff09;go mod tidy&#xff08;2&#xff09;r : gin.Default()&#xff08;3&#xff09;r.GET()路由注册 &#xff08;4&#xff09;r.Run()路由匹配 总结 gin框架路由详解 先创建一个项目&#xff0c;编写一个简单的demo&#…...

GPIO+TIM(无PWM)实现呼吸灯功能

程序特点&#xff1a; 1、模块化&#xff0c;可快速移植&#xff0c;5分钟便可完成移植。 2、通过GPIO普通定时器&#xff0c;实现呼吸灯功能。 3、PWM周期为5ms&#xff0c;占空比调节时间为20ms&#xff0c;占空比为100等份&#xff0c;即呼吸灯从暗到亮需要20ms*1002s。 …...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...