一.报错截图

[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>

二.分析的原因

  1. 由于Vue内部的机制,传入的props中的值
    是不允许被修改的。在新的渲染机制中,当父组件重新渲染时,子组件都被会覆盖,这时的props是不可变的。

  2. v2.6.10报错,而v2.5.17不报错

三.解决方案

  1. 在data中再定义两个新的变量,然后把父组件传过来的值赋值给新的变量,之后操作这两个新的变量即可。

Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"的更多相关文章

  1. 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 ...

  2. [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 ...

  3. 报错:[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" >< ...

  4. Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

    场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...

  5. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

    子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...

  6. 报错:[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 ...

  7. Vue avoid mutating a prop directly since the value will be overwritten

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

    报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...

  9. Vue 错误:Avoid mutating a prop directly

    Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...

随机推荐

  1. 面向对象的基本特征:封装(接口 、struct、枚举、委托、匿名函数) 继承,多态。

    如何理解面向对象的基本特征:封装 我们通过接口 .struct.枚举.委托.泛型.匿名函数的去理解封装 接口 .struct.枚举.委托.泛型.匿名函数有什么区别?我们通过这些IL探究真相,案例如下: ...

  2. RabbitMQ安装以及简单操作应用(针对Windows和C#)

    1.RabbitMQ安装 1.1下载并安装Erlang https://www.erlang.org/downloads 一直点next就安装好了.我直接使用了默认的安装目录.否则的话,应该需要配置一 ...

  3. HMS Core挑战赛故事:鞋、街景、手办、玩具,原来这些都可以3D建模

    HMS Core线上Codelabs挑战赛第3期中,开发者通过学习和运用HMS Core开发的3D建模服务,生成3D建模应用demo,再使用demo为自己身边的一个实物完成建模.在提交的作品中,小编发 ...

  4. idea教程--Maven 骨架介绍

    简单的说,Archetype是Maven工程的模板工具包.一个Archetype定义了要做的相同类型事情的初始样式或模型.这个名称给我们提供来了一个一致的生成Maven工程的方式.Archetype会 ...

  5. Java课程设计---浏览学生(实现根据姓名查询)

    1.修改窗口 2.在StudentDao中增加根据姓名查找的方法 public List<Student> getStudent(String name)throws SQLExcepti ...

  6. 用RecyclerView实现瀑布流

    首先建立一个 PbRecyclerViewActivity.java文件: 1 public class PbRecyclerViewActivity extends AppCompatActivit ...

  7. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html

  8. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...

  9. .NET 7 预览版2 的亮点之 NativeAOT 正式合并入 .NET 主线

    .NET 中备受追捧和期待已久的功能NativeAOT终于出现在本周的.NET 7 预览版2中,该项目的工作仍在继续,该版本将 NativeAOT 从实验性的 dotnet/runtimelab re ...

  10. 做一个能对标阿里云的前端APM工具(上)

    APM 全称是 Application Performance Monitor,即性能监控 这篇文章有三个前提: 从产品形态上看这肯定不是一个能够媲美阿里产品的竞品,所以抱歉我碰瓷了.你可以把这里的阿 ...