
在写vue项目时遇到如下问题:
error Unexpected mutation of "todo" prop
todo是我定义的props,而vue是不允许子组件改变父组件传来的参数值的,自然不能放在v-model里了,不然就被表单乱改值。

解决方法1: ----- 不建议这样
把v-modal改为:checked,改变它的选中状态。
<input type="checkbox" :checked="todo.isCheck" />
解决方法2:
子组件使用计算属性调用父组件的方法来修改父组件的值
父组件给子组件传递方法

父组件定义方法
// 修改 todo 的 isCheck 属性的状态
const updateTodo = (todo: Todo, isCheck: boolean) => {
todo.isCheck = isCheck
console.log(todo)
}
子组件接受父组件传来的函数

计算属性调用父组件传来的方法
// 子组件
const isCheck = computed({
get(){
return props.todo.isCheck
},
set(isCheck){
props.updateTodo(props.todo, isCheck)
}
})

本文介绍了解决Vue中子组件意外修改父组件传递的props值问题的两种方法。一种是通过改变v-model为:checked的方式间接更新状态;另一种则是通过父组件传递更新方法到子组件,利用计算属性触发更新。
4664

被折叠的 条评论
为什么被折叠?



