vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent

使用props进行父子组件通信时产生错误：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: “currentIndex”

产生错误的原因：在子组件中，你试图修改父组件通过props与子组件通信的数据。

两种解决方法：

将这个父组件传进来的要修改的数据，通过$emit再传回给父组件，在父组件中进行修改。
当父组件通过props与子组件通信时，可以将数据放在一个对象中传递给子组件，这时再子组件就可以修改对象中的属性，也就修改了父组件传过来的数据。

例如(方法一)：

父组件：

      <tab-control:titles="titles"@choseItem="choseItem":currentIndex="currentIndex"ref="tabControl"></tab-control><script>date(){currentIndex: 0 }methods:{choseItem: function(index) {this.currentIndex = index;//在父组件修改值}}</script>

子组件：

<template><div class="tabControl"><ul><liv-for="(item, index) in titles":key="index"@click="choseItem(index)":class="{ active: currentIndex === index }"><span>{{ item }}</span></li></ul></div>
</template><script>
export default {name: "TabControl",props: {titles: {type: Array},currentIndex: {type: Number,default: 0}},methods: {choseItem: function(index) {//this.currentIndex = index;//注意：不能在子组件修改从父组件传过来的currentIndex，既然不能在这里修改，反正都要将index传出去，那就通过emit传出去吧//告知Home组件根据下标来给Goods传数据this.$emit("choseItem", index);}}
};
</script>

方法二：
在父组件传递一个对象，对象包含父子组件通信的数据

父组件：
<parent :objData="objData"></parent>data(){return {result:true}
}子组件：props:{objData:{type:Object}
}修改数据：
this.objData.result=false;

封装在对象中的通信数据修改也是不会报任何错误的。

vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent相关推荐

【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten
author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成? 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报 ...
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...
author: jwensh date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成? 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 ...
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop
问题描述 vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be ...
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
前言前端开发中,在使用Vue开发的时候,经常会遇到一些很共性的报错提示,而且有时候提示已经很明确的告诉开发者问题出现在哪里,尤其是在Chrome的控制台输出上面,只要看一下输出日志就知道问题所在.但 ...
VUE报错：Avoid mutating a prop directly since the value will be overwwritten whenever the parent及解决方案
VUE报错: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...
【Vue.JS】Render 实现留言板实例及 Avoid mutating a prop directly 错误处理
声明:文中代码整体思路来源于梁灏编著的 [Vue.JS 实战]一书,学习过程中发现一处问题.以做记录效果图代码 index.html <!DOCTYPE html> <htm ...
【vue warning】avoid mutating a prop directly
[vue warning] avoid mutating a prop directly 一.问题描述使用props,通过父组件给子组件传值,子组件在使用props中的属性时,直接对props中的属 ...
关于使用elementUI DateTimePicker组件报错[Vue warn]: Avoid mutating a prop directly since the value will be
报错信息如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the ...

vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent

vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent相关推荐

最新文章

热门文章