Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"
一.报错截图
[Vue warn]: 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. Prop being mutated: "zinum"
报错代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件</title>
</head>
<body>
<div id="app">
<!-- 自定义名：zinum,绑定数据模型：fuNum -->
<wzwfuzi :zinum="fuNum"></wzwfuzi>
</div> </body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 父向子组件（将父组件的数据模型绑定到子组件的模板中，实现数据提供）
// 自定义全局组件（子组件），注意这里改变的zinum值不会影响父组件的fuNum值
Vue.component("wzwfuzi",{
template:"<div>从父组件拿来的数据：{{zinum}}<button @click='zinum++'>点我加1==》{{zinum}}</button></div>",
props:["zinum"], // 接受父组件传值[自定义名:zinum]
}) // 父组件：新建Vue
const app = new Vue({
el:"#app",
data:{
fuNum:5
}
})
</script>
</html>
二.分析的原因
由于Vue内部的机制，传入的props中的值
是不允许被修改的。在新的渲染机制中，当父组件重新渲染时，子组件都被会覆盖，这时的props是不可变的。v2.6.10报错，而v2.5.17不报错
三.解决方案
在data中再定义两个新的变量，然后把父组件传过来的值赋值给新的变量，之后操作这两个新的变量即可。
Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"的更多相关文章
- vue报错 [Vue warn]: 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
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- [Vue warn]: 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. Prop being
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- 报错：[Vue warn]: 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. Prop bei
项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...
- Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...
- 报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...
- Vue avoid mutating a prop directly since the value will be overwritten
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案
报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...
- Vue 错误：Avoid mutating a prop directly
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
随机推荐
- C# new操作符的作用
CLR要求所有对象(实例)都用new操作符创建,那么new操作符做了哪些事呢?1. 计算字节数 计算类型及其所有基类型(父类)中定义的所有实例字段需要的字节数.堆上每个对象都需要一些额外的成员, ...
- ansible复习笔记_role-从零到无
--创建时间:2021年3月9日 --修改时间:2021年3月9日 --作者:飞翔的小胖猪 roles是各个单独功能性模块的集合,通过分别将变量.文件.任务.模板及处理器放置于单独的目录中,并可以便捷 ...
- SpringMVC教程--eclipse中使用maven创建springMVC项目
一.在eclipse中创建maven-archetype-webapp项目: 1.新建项目选择maven项目 2.默认,下一步 3.选择maven-archetype-webapp,其他保持默认即可 ...
- 【python画圆】pip安装库时出现Read timed out.解决办法
昨天第一次用python画圆,当时并没有安装numpy库(导入数据包)和matplotlib库(导入图形包),于是尝试用pip安装库 首先,我先更新了pip,如下图: 顺便附上成功截图: 然后安装nu ...
- 基于SqlSugar的数据库访问处理的封装，支持多数据库并使之适应于实际业务开发中
在我的各种开发框架中,数据访问有的基于微软企业库,有的基于EFCore的实体框架,两者各有其应用场景,不过多的去比较.最近在使用SqlSugar的时候,觉得这个数据访问处理的组件确实很灵活,据说性能也 ...
- Thread线程基本写法用法
//线程属性 protected Thread workerThread; protected bool isWorkerThreadStopped = true; public void Initi ...
- laravel7 h-ui模板点改
1:html页面 <td> @if($item->fang_status == 0) <span onclick="changeFangStatus(this,{{$ ...
- 使用Python 模拟RSA 加密与解密
一.关于 RSA具体原理请移步其他文章,本文主要使用Python 来模拟RSA 算法的实现过程 二.简要分析 在RSA算法中,存在以下几个参数: 1.大素数p.q 2.n = p *q 3.Phi_n ...
- m3u8文件合并处理
m3u8文件合并处理 简介 M3U8 是 Unicode 版本的 M3U,用 UTF-8 编码."M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP ...
- Arduino UNO开发板、Arduino CNC Shield V3.0扩展板、A4988驱动板、grbl固件使用教程
前言 CNC Shield V3.0可用作雕刻机,3D打印机等的驱动扩展板,板上一共有4路步进电机驱动模块的插槽,可驱动4路不进电机,而每一路步进电机都只需要2个IO口,也就是说,6个IO口就可以很好 ...