【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent

当我们直接改变父组件的 props 值是会报以下警告：

[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: “facomment”

会报错的原因是由于 Vue 的单项数据流。

怎样理解 Vue 的单项数据流？

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。
注意： 在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。
如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。

解决方案：

父组件：

<template><div><BlogComment :facomment="comment" @recordsChange="recordsChange"/></div>
</template><script>
export default {name: "BlogDetail",components: {BlogComment},data(){return {comment: {},}},methods: {recordsChange(records) {this.comment = records; //在父组件修改值},}
};
</script>

子组件：

<template><div><div class="pagination-box" v-if="facomment.records != null"><el-paginationbackgroundlayout="prev, pager, next":current-page="facomment.current":page-size="facomment.size":total="facomment.total"@current-change="page1"></el-pagination></div></div>
</template><script>
export default {name: "",props: ["facomment"],methods: {// 分页page1(page) {this.$axios.get("/comment/list", {params: {blogId: this.blogId,page: page,pageSize: this.pageSize,},}).then((res) => {// this.facomment = res.data.data (不能直接修改)this.$emit("recordsChange", res.data.data); // 用 $emit 通知父组件去修改});},}
};
</script>

【Vue】报错：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 whenever the parent
1. vue报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent com ...
vue 报错avoid mutating a prop directly since the value will be overwritten whenever
这里写自定义目录标题 avoid mutating a prop directly since the value will be overwritten whenever 子组件修改父组件值时报的错 ...
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
前言前端开发中,在使用Vue开发的时候,经常会遇到一些很共性的报错提示,而且有时候提示已经很明确的告诉开发者问题出现在哪里,尤其是在Chrome的控制台输出上面,只要看一下输出日志就知道问题所在.但 ...
vue修改props传过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever the par
在做项目时有时候会遇到这种错误这句话的意思是说,避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.相反,使用基于道具值的数据或计算属性. 就是不能直接改变父组件传过来的props,所以怎么办 ...
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 ...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
原因: 子组件改了父组件的值避免修改父组件传过来的值注意: 如果value是obj,需要进行深拷贝. 可以参考: https://blog.csdn.net/u013948858/article/ ...
uni-app:Avoid mutating a prop directly since the value will be overwritten whenever the parent
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever
前言: 我写了一个组件,然后子组件外层绑定了一个v-model='moreInquiriesCard', 这个值通过props取的父组件传过来的值,子组件是个modal弹框,对默认右上角有个" ...

【Vue】报错：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 whenever the parent相关推荐

最新文章

热门文章