Unexpected mutation of “XXX“ prop 如何解决
props 里面的数据规则 :prop 是父组件传过来的数据,受父组件数据影响的。 如果是普通数据(数字、字符串、布尔值)绝对不能修改,即便改了也不回传导给父组件。 如果是引用类型(数组,对象),可以修改,例如:[].push() 对象.xxx = xxx 。不能重新赋值,如: xxx = []
·
先搞清楚 props 里面的数据规则
props: {
// prop 是父组件传过来的数据,受父组件数据影响的
// 如果是普通数据(数字、字符串、布尔值)绝对不能修改,即便改了也不回传导给父组件
// 如果是引用类型(数组,对象)
// 可以修改,例如:[].push() 对象.xxx = xxx
// 不能重新赋值, xxx = []
},
props 如下
props: {
arr: {
type: Array,
required:true
}
},
场景1:需对 arr 进行修改
假如我们在函数中对 arr 进行删除数据, arr 里面的数据被修改了,此时父组件的 arr 的数据也是会跟着改变
delete (index) {
this.arr.splice(index,1)
}
场景2:需对 arr 赋值 为 [ ]
// 如果这样写,就会报错
<span @click="arr = []">全部删除</span>
// 我们可以通过自定义事件 , 给父组件传一个函数,在父组件内对 arr = [ ]
<span @click="$emit('clear-arr')">全部删除</span>
在父组件中:
<search
@clear-arr = 'arr = []'
/>
更多推荐
已为社区贡献1条内容
所有评论(0)