共计 481 个字符，预计需要花费 2 分钟才能阅读完成。
![[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..](https://yojack.cn/wp-content/uploads/replace/674da76aba1ac2cc63809118a7aaa2bd.jpeg "[Vue warn]: 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 parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “value”.
译文：[Vue 警告]: 避免直接改变 prop，因为每当父组件重新呈现时，该值将被覆盖。相反，应该使用基于 prop 值的数据或计算属性。prop 发生变异:”value”。简单地说，不可以直接修改 props 接收的属性值。
解决方法：只需要在子组件的 data() 重新定义一个变量，将 props 属性赋值给子组件的新定义的变量，可用 属性.sync 将数据同步更新到父组件
原来的写法：
父组件
![[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..](https://yojack.cn/wp-content/uploads/replace/be637cd876dabd729d83ddc536877c1c.jpeg "[Vue warn]: 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 parent..](https://yojack.cn/wp-content/uploads/replace/c802256c3dfb9c2b0e51901abbb3540c.jpeg "[Vue warn]: 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 parent..](https://yojack.cn/wp-content/uploads/replace/a141925873068c564bb61edebaf0ec97.jpeg "[Vue warn]: 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 parent..](https://yojack.cn/wp-content/uploads/replace/7e78fbaf35fa6d8a730a8710c19380b6.jpeg "[Vue warn]: 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 parent..](https://yojack.cn/wp-content/uploads/replace/6e19c4423d4423cfaee58350f552c03c.jpeg "[Vue warn]: 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 parent..
正文完
