一.报错截图

[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. 【C#基础知识】C#控制台程序入口函数 Main(string[] args) 参数详解

    测试环境vs2019+.net5.0 请看 :https://cloud.tencent.com/developer/article/1507934 本测试环境vs2022+.net6.0 +wind ...

  2. C# init用法

    init是什么意思? init就 modreq([System.Runtime]System.Runtime.CompilerServices.IsExternalInit) 类型的缩写 modreq ...

  3. 匿名函数 =匿名方法+ lambda 表达式

    匿名函数的定义和用途 匿名函数是一个"内联"语句或表达式,可在需要委托类型的任何地方使用. 可以使用匿名函数来初始化命名委托[无需取名字的委托],或传递命名委托(而不是命名委托类型 ...

  4. WCF学习笔记——Day1：一个WCF demo

    Visual Studio2017,使用IIS托管.文中涉及一些WCF的基本概念,e.g.服务契约.托管等.可以先阅读<WCF服务编程>第一章. 1.新建一个WCF服务库(WCF Serv ...

  5. 点击弹出div内容包括遮罩层

    效果: HTML: <!-- 添加分组按钮 -->             <div class="group_add" onclick = "docu ...

  6. Qt：QDateTimeEdit

    0.说明 QDateTimeEdit类提供了一个用于编辑Date和Time的Widget,它就像下边这样 QDateTimeEdit允许用户使用键盘编辑Date.或者用方向键来增加或减少Date.Ti ...

  7. JZ-006-旋转数组的最小数字

    旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. NOTE:给出的所有元素都大于0,若数组 ...

  8. Bert不完全手册2. Bert不能做NLG？MASS/UNILM/BART

    Bert通过双向LM处理语言理解问题,GPT则通过单向LM解决生成问题,那如果既想拥有BERT的双向理解能力,又想做生成嘞?成年人才不要做选择!这类需求,主要包括seq2seq中生成对输入有强依赖的场 ...

  9. const 对象的属性能否修改

    const保证的并不是变量的值不能改动,而是变量指向的那个内存地址不能改动. 对于基本类型的数据(数值.字符串.布尔值),其值就保存在变量指向的那个内存地址,因此等同于常量. 对于引用类型的数据(主要 ...

  10. LGP5437题解

    呃怎么感觉很裸啊( 题意是让求生成树边权之和的期望,那么我们只需要算出所有生成树的边权之和除以生成树边数即可. 由于是求和,我们只需要计算出每条边对答案的贡献即可. 我们知道一个完全图有 \(n^{n ...