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- ...
随机推荐
- 面向对象的基本特征：封装（接口 、struct、枚举、委托、匿名函数） 继承，多态。
如何理解面向对象的基本特征:封装 我们通过接口 .struct.枚举.委托.泛型.匿名函数的去理解封装 接口 .struct.枚举.委托.泛型.匿名函数有什么区别?我们通过这些IL探究真相,案例如下: ...
- RabbitMQ安装以及简单操作应用（针对Windows和C#）
1.RabbitMQ安装 1.1下载并安装Erlang https://www.erlang.org/downloads 一直点next就安装好了.我直接使用了默认的安装目录.否则的话,应该需要配置一 ...
- HMS Core挑战赛故事：鞋、街景、手办、玩具，原来这些都可以3D建模
HMS Core线上Codelabs挑战赛第3期中,开发者通过学习和运用HMS Core开发的3D建模服务,生成3D建模应用demo,再使用demo为自己身边的一个实物完成建模.在提交的作品中,小编发 ...
- idea教程--Maven 骨架介绍
简单的说,Archetype是Maven工程的模板工具包.一个Archetype定义了要做的相同类型事情的初始样式或模型.这个名称给我们提供来了一个一致的生成Maven工程的方式.Archetype会 ...
- Java课程设计---浏览学生（实现根据姓名查询）
1.修改窗口 2.在StudentDao中增加根据姓名查找的方法 public List<Student> getStudent(String name)throws SQLExcepti ...
- 用RecyclerView实现瀑布流
首先建立一个 PbRecyclerViewActivity.java文件: 1 public class PbRecyclerViewActivity extends AppCompatActivit ...
- python3中collections模块(转)
https://www.cnblogs.com/zhangxinqi/p/7921941.html
- VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...
- .NET 7 预览版2 的亮点之 NativeAOT 正式合并入 .NET 主线
.NET 中备受追捧和期待已久的功能NativeAOT终于出现在本周的.NET 7 预览版2中,该项目的工作仍在继续,该版本将 NativeAOT 从实验性的 dotnet/runtimelab re ...
- 做一个能对标阿里云的前端APM工具（上）
APM 全称是 Application Performance Monitor,即性能监控 这篇文章有三个前提: 从产品形态上看这肯定不是一个能够媲美阿里产品的竞品,所以抱歉我碰瓷了.你可以把这里的阿 ...