【解决方案】[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa
1、错误详情[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.
·
1、错误详情
[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: "items_index"
2、错误原因
改动了子组件中引用的父组件的变量,也就是props中的数据
在Vue2中组件props中的数据只能单向流动,即只能从父组件通过组件的DOM属性attribute传递props给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props数据。
3、解决方案
不要直接修改从父组件传过来的props数据,在data函数中重新定义一个变量,将props数据数据赋值在data变量上,后面修改data变量即可。如下:
props:["father"]
data(){
return{
father_1 = this.father
}
}
如果想要监听父组件中传递过来的变量,从而修改子组件中的某个数据,可以使用watch这个监听函数来监听。如下:
props:["father"]
data(){
return{
son = ""
}
}
//监听函数,只要从父组件中传过来的father变量发生变化,
//子组件中定义的son变量就会赋值为“儿子”
watch:{
father(){
this.son = "儿子"
}
}
更多推荐
所有评论(0)