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- ...
随机推荐
- Java基础——选择语句
Java基础--选择语句 1. if语句 规律: 1. 首先计算表达式的值. 2. 若表达式为真,则执行对应语句,为假则不执行. 第一种: if(表达式) 语句;//多个语句可用{} 例如 ...
- 『现学现忘』Docker基础 — 16、Docker中的基本概念和底层原理
目录 1.Docker的底层原理 2.Docker中常用的基本概念 3.run命令的运行流程 4.为什么Docker比VM快 Docker架构图: 我们依照Docker架构图进行Docker基础概念的 ...
- 二级python考试大纲以及考试指导复习方案
二级python考试大纲与复习指导 本人也是在备考二级py 可能理解不对的地方请指正 参考网络,侵权删除 考纲解读→ 一.考试介绍 1.1考试人群 全国计算机等级考试(python语言程序设计(二 ...
- 微信小程序断网处理
wx.onNetworkStatusChange(function callback) 参数 function callback 网络状态变化事件的回调函数 参数 Object res 属性 类型 说 ...
- tp5 git 常见命令
git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...
- 如何使用DTM将App事件发送到Google Analytics
本文分享于华为开发者论坛<如何使用DTM将App事件发送到Google Analytics>,可观看视频具体集成指导. 作为一名开发者或App运营人员,实时获取用户在App中的行为数据是日 ...
- 输入URL到页面加载过程
URL(uniform resource location) : 统一资源定位符,用来作为互联网上各种资源的标识符,可理解为身份证号 . 注意点:浏览器为了保证安全性,设定了跨域保护策略, 即窗口之间 ...
- CentOS 7.5关闭FireWall 和SELinux图文详解
CentOS 7.5关闭FireWall 和SELinux图文详解 1. 环境 CentOS 7.5 2. 关闭FireWall和SELinux 2.1 FireWall 使用systemctl st ...
- Navicat连接不上MySQL 8.0
Navicat连接不上MySQL 8.0 更改加密方式 1.先通过命令行进入mysql的root账户: C:\Windows\system32> mysql -uroot -p 2.更改加密方式 ...
- 变量、变量作用域、常量final、变量的命名规范
变量 变量是什么:就是可以变化的量! Java是一种强类型语言,每个变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域. 注意事项: 每个变量都有类型,类 ...