【Vue】错误:[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 parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei
·
错误:[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: "introductionList"
问题分析:
父组件通过props传值给子组件,子组件改变props的属性值导致;
父子组件中的数据流是单向的,父子 prop 之间形成了一个单向绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。(父组件更新,子组件中的prop值也会更新,但子组件不能修改由父组件传递过来的值);
当props是对象的时候,子组件直接修改数据,不会引起警告,但最好不要这样操作;
子组件中更改绑定的prop值最好使用计算属性computed解决。
解决方式:
父组件:
<IntroduceVideoEditDiv
:introduction-list="introductionList"
@on-change-introduction="onChangeIntroduction"></IntroduceVideoEditDiv>
data () {
return {
// 介绍list
introductionList: []
},
methods: {
// 数据的改变在父组件中修改
onChangeIntroduction (val) {
this.introductionList = val
},
}
子组件:定义一个计算属性,处理props的值并返回
<template v-for="(item, index) in introductionList_">
<div :key="index">
...
</div>
</template>
props: {
introductionList: {
type: Array
}
},
computed: {
// 子组件中更改绑定的prop值最好使用计算属性computed解决
introductionList_: {
get () {
return this.introductionList
},
// 将绑定的introductionList改为绑定计算属性值introductionList_,此时的set方法不能写
// this.introductionList = val,这样和直接绑定prop中的introductionList是没什么区别的所
// 以,最好要将此时的introductionList_改变交给父组件控制,通过父组件来改变prop的
// introductionList值。
set (val) {
// introductionList_改变由父组件控制
this.$emit('on-change-introduction', val)
}
}
},
更多推荐
已为社区贡献6条内容
所有评论(0)