共计 774 个字符，预计需要花费 2 分钟才能阅读完成。
Vue 正告：Avoid mutating a prop directly since the value will be overwritten……
起因 ：props 值不能被扭转
实质：组建通信的双向绑定问题
在一些状况下，咱们可能会须要对一个 prop 进行『双向绑定』。事实上，这正是 Vue 1.x 中的 .sync 修饰符所提供的性能。当一个子组件扭转了一个 prop 的值时，这个变动也会同步到父组件中所绑定的值。这很不便，但也会导致问题，因为它毁坏了『单向数据流』的假如。因为子组件扭转 prop 的代码和一般的状态改变代码毫无区别，当光看子组件的代码时，你齐全不晓得它何时悄悄地扭转了父组件的状态。这在 debug 简单构造的利用时会带来很高的保护老本。
下面所说的正是咱们在 2.0 中移除 .sync 的理由。然而在 2.0 公布之后的理论利用中，咱们发现 .sync 还是有其实用之处，比方在开发可复用的组件库时。咱们须要做的只是让子组件扭转父组件状态的代码更容易被辨别。
从 2.3.0 起咱们从新引入了 .sync 修饰符，然而这次它只是作为一个编译时的语法糖存在。它会被扩大为一个自动更新父组件属性的 v-on 侦听器。
1..sync办法
如果 vue 版本是 2.3.0+，可应用.sync
<comp :foo.sync="bar"></comp>
会被扩大为：<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件须要更新 foo 的值时，它须要显式地触发一个更新事件
this.$emit('update:foo', newValue)2. 对象个性
应用对象的援用个性实现的双向绑定
能够传入对象，在子组件中批改对象属性的值，父组件中该值也会发生变化
原文：https://blog.csdn.net/qq_36571602/article/details/77801136
正文完