子组件不能直接改变父组件传递的“道具”值

        引言:

        不少人在刚开始使用vue时都会遇到一个报错——Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.避免直接改变道具,因为当父组件重新渲染时,该值将被覆盖。相反,使用基于道具值的data或computed属性。)

        这个问题是因为在 Vue.js 中,数据流是单向的,父组件通过 props 将数据传递给子组件,子组件中不能直接修改父组件传递进来的值。那么我们该如何去解决呢?

一、场景举例

        大家在开发中会经常对Dialog弹窗进行二次封装,从而便于我们在多个页面使用,这个时候我们就需要在父组件中控制Dialog弹窗的展示,同时还需要在子组件Dialog中将自己关闭。这种情况下就可能会出现上面的报错。

例:

        在父组件中引入一个封装过的Dialog弹窗组件,并向子组件传递所需参数,此时我们默认showDialog为true。

<template><div><satisfactionDialog:showDialog="showDialog"@cancel="showDialog = false"@affirm="showDialog = false"@close="showDialog = false"affirm-text="确认"cancel-text="取消"title="子组件标题"><!--			<div style="height: 200px"></div>--></satisfactionDialog></div>
</template><script>
import satisfactionDialog from "XXXXXXX";export default {data() {return {showDialog: true,};},methods: {},components: { satisfactionDialog },
};
</script>

         子组件中接受父组件传递的参数,此时子组件为展示状态。

<template><div><van-dialog v-model="showDialog" width="82%" :show-confirm-button="false" :overlay="overlay" title><div class="content"><img src="@/views/assets/close_icon.png" @click="close" alt="" /><header>{{ title }}</header><slot></slot><footer><div class="cancel"><van-button type="info" @click="cancel">{{ cancelText }}</van-button></div><span></span><div><van-button type="info" @click="affirm">{{ affirmText }}</van-button></div></footer></div></van-dialog></div>
</template>
<script>
export default {name: "satisfactionDialog",props: {showDialog: Boolean,cancelText: String, //取消按钮文案affirmText: String, //确认按钮文案title: String, //标题文案overlay: {//是否显示遮罩层type: Boolean,default: true,},},
};
</script>

        我们要在子组件中关闭Dialog弹窗,此时方法应该怎样写? 

        可能有同学会写:

methods: {// 取消事件cancel() {this.showDialog = false;},//确认事件affirm() {this.showDialog = false;},close() {this.showDialog = false;},},

        去年刚入职的我也是这样写的。。。此时我们就会发现控制台报错了,报错的原因正是:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.避免直接改变道具,因为当父组件重新渲染时,该值将被覆盖。相反,使用基于道具值的data或computed属性。)

二、解决方法

 那么我们应该怎样去写呢?这里给大家几种方法:

       1、通过this.$emit去调用父组件的自定义方法,这样便可以控制数据流向永远都是通过父组件改变值来改变子组件的显示。
methods: {// 取消事件cancel() {this.$emit("cancel");},//确认事件affirm() {this.$emit("affirm");},close() {this.$emit("close");},},
        2、使用自定义v-model一劳永逸,就不需要再关注父子传参了。

        在父组件中使用v-model="showDialog"代替:showDialog="showDialog",注意子组件中的写法:

        首先需要设置model属性:

model: {   //在这里设置model绑定的值的对应关系prop: "showDialog",event: "change",  //定义触发的方法},

        props中需要正常接收 :

props: {showDialog: Boolean,  //注意这里需要正常接收父组件传递的值},

        通过调用定义好的event方法来改变值:

methods: {// 取消事件cancel() {this.$emit("change", false);},//确认事件affirm() {this.$emit("change", false);},close() {this.$emit("change", false);},},

关于自定义v-model大家也可以参考我的另一篇文章中的讲解自定义子组件的v-model

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

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

相关文章

Ubuntu 22.04.4 LTS (linux) GoAccess 分析 Nginx 日志

1 安装goaccess sudo apt-get update sudo apt-get install goaccess 2 控制台运行 goaccess -a -d -f /usr/local/openresty/nginx/logs/access.log -p /etc/goaccess/goaccess.conf #sudo vim /etc/goaccess/goaccess.conf time-format %H:%M:%S date-format %d/%b…

iOS ------ Block的相关问题

Block的定义 Block可以截获局部变量的匿名函数&#xff0c; 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…

3.2、数据结构-数组、矩阵和广义表

数组结构 数组是定长线性表在维度上的扩展,即线性表中的元素又是一个线性表。N维数组是一种“同构”的数据结构,其每个数据元素类型相同、结构一致。 一个m行n列的数组表示如下: 其可以表示为行向量形式&#xff08;一行一行的数据&#xff09;或者列向量形式&#xff08;一…

前端开发使用Big.js精算避免误差

1、下载 npm install big.js 全局引入还是局部引入可根据项目框架及个人需求 2、静态引入 < script src https://unpkg.com/big.js6.0.0/big.mjs > </ script > 或者 import Big from https://raw.githubusercontent.com/mikemcl/big.js/v6.0.0/big.mjs; i…

Nginx 怎样处理请求的故障转移?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 怎样处理请求的故障转移&#xff1f;一、理解故障转移的重要性二、Nginx 中的故障检测机制三、Nginx 中的请求分配策略四、Nginx 中的故障转移实现方式五、…

Shell脚本编程(一)

目录 一、Shell命令行的书写规则 二、编写/修改权限及执行shell程序的步骤 1、编写简单Shell程序 2、建立可执行程序 3、执行Shell程序 4、实例 三、Shell程序中使用参数 1、位置参数 2、内部参数 3、实例一 4、实例二 一、Shell命令行的书写规则 在执行Shell命令时…

搭建本地私有知识问答系统:MaxKB + Ollama + Llama3 (wsl网络代理配置、MaxKB-API访问配置)

目录 搭建本地私有知识问答系统:MaxKB、Ollama 和 Llama3 实现指南引言MaxKB+Ollama+Llama 3 Start buildingMaxKB 简介:1.1、docker部署 MaxKB(方法一)1.1.1、启用wls或是开启Hyper使用 WSL 2 的优势1.1.2、安装docker1.1.3、docker部署 MaxKB (Max Knowledge Base)MaxKB …

便携式气象仪:科技赋能,让气象观测更智能

随着科技的快速发展&#xff0c;越来越多的领域受益于技术的进步。其中&#xff0c;气象观测领域也不例外。传统的气象观测设备虽然精确可靠&#xff0c;但往往体积庞大、携带不便&#xff0c;且需要专业人员进行操作和维护。而便携式气象仪的出现&#xff0c;则打破了这一局限…

在WPF中使用WebView2详解

Microsoft Edge WebView2 Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎&#xff0c;以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码&…

Golang | Leetcode Golang题解之第284题窥视迭代器

题目&#xff1a; 题解&#xff1a; type PeekingIterator struct {iter *Iterator_hasNext bool_next int }func Constructor(iter *Iterator) *PeekingIterator {return &PeekingIterator{iter, iter.hasNext(), iter.next()} }func (it *PeekingIterator) hasNe…

宿州市各区县两化融合贯标申请认定奖补奖励和认定条件、材料、周期、流程大全

本文将为大家盘点宿州市各区县两化融合贯标申请认定奖补奖励和认定条件、材料、周期、流程等内容&#xff0c;详情如下&#xff0c;埇桥区、砀山县、萧县、灵璧县、泗县需要申报的可指导&#xff01; 宿州市各区县两化融合贯标申请认定奖补奖励&#xff08;仅供参考&#xff0…

学习记录day19——数据结构 查找算法

概念 在给定数据元素的某个值&#xff0c;在查找表中确定一个其关键字等于给定值的数据元素的操作&#xff0c;叫做查找 查找的分类 顺序查找:将待查找数据&#xff0c;进行全部遍历一遍&#xff0c;直到找到要查找的元素 折半查找:每次都去除一半的查找范围的查找方式&#x…

vue3响应式用法(高阶性能优化)

文章目录 前言&#xff1a;一、 shallowRef()二、 triggerRef()三、 customRef()四、 shallowReactive()五、 toRaw()六、 markRaw()七、 shallowReadonly()小结&#xff1a; 前言&#xff1a; 翻别人代码时&#xff0c;总结发现极大部分使用vue3的人只会用ref和reactive处理响…

mysql-bin 恢复数据库

能看到这里的同学估计肯定摊上大事了吧&#xff01;不要慌&#xff0c;一定要冷静&#xff0c;记录一下作者的大事件吧&#xff0c;黑客通过SQL注入的方式执行了一段SQL &#xff1a; DROP DATABASE ****** 后果就是导致整个数据库被删了&#xff0c;当时心是拔凉拔凉的&#x…

在jmeter中使用javascript脚本

工作上遇到一个压力测试的需求&#xff0c;需要测试几个考试相关的接口。其中有一个获取试题详情的接口&#xff0c;和一个提交答题信息的接口。后一个接口以上一接口的返回内容为参数&#xff0c;添加上用户的答案即可。jmeter提供了非常多的方式可以实现该需求&#xff0c;这…

【深度学习】大模型GLM-4-9B Chat ,微调与部署(3) TensorRT-LLM、TensorRT量化加速、Triton部署

文章目录 获取TensorRT-LLM代码&#xff1a;构建docker镜像并安装TensorRT-LLM&#xff1a;运行docker镜像&#xff1a;安装依赖魔改下部分package代码&#xff1a;量化&#xff1a;构建图&#xff1a;全局参数插件配置常用配置参数 测试推理是否可以代码推理CLI推理 性能测试小…

钡铼网关实时数据互联,加速IEC104与MQTT云平台对接

随着工业4.0时代的到来&#xff0c;电力系统中的数据采集、监控与远程控制需求日益增长。IEC 104&#xff08;IEC 60870-5-104&#xff09;作为国际电工委员会&#xff08;IEC&#xff09;制定的电力自动化通信协议&#xff0c;广泛应用于电力系统的状态监测、数据采集和设备控…

Vue实现简单小案例

一、创建文件夹 二、引用vue.js <script src"../js/vue.js"></script> 三、准备一个容器 <div id"app"><h1>Hello,{{name}}</h1> </div> 四、创建实例 <script>new Vue({el:"#app", //el用于指…

【STM32 FreeRTOS】FreeRTOS的移植

其实这篇文章不侧重移植&#xff0c;因为我们会使用CubeMX配置&#xff0c;那样会自动移植FreeRTOS。 关于FreeRTOS&#xff0c;可以参考官网&#xff1a;FreeRTOS - Quick start guide 当我们在CubeMX中配置了CMSIS_V2后尝试编译的时候会有一个弹窗。 第一个问题就是强烈建议…

Qt中的项目文件

QT core gui#core 核心模块 gui 窗口界面模块 # 在Qt4中 core gui widgets 是一体的 greaterThan(QT_MAJOR_VERSION, 4): QT widgets CONFIG c11 #使用C11标准编译 # The following define makes your compiler emit warnings if you use # any Qt feature that h…