1. 需求及报错

需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下：

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"

2. 分析原因

• 从报错内容上来看，我们改动了子组件中引用的父组件的变量，也就是 props 中的数据，是不能这么操作的；

• 从提示的信息上看，使用 mutated 是否可行？

• 在 Vue2 中组件 props 中的数据只能单向流动，即只能从父组件通过组件的 DOM 属性 attribute 传递 props 给子组件，子组件只能被动接收父组件传递过来的数据，并且在子组件中，不能修改由父组件传来的 props 数据。

• 组件内不能修改props的值，同时修改的值也不会同步到组件外层，即调用组件方不知道组件内部当前的状态是什么

2.1 这是什么原因造成？

• 在 vue1.x 版本中利用 props 的 twoWay 和 .sync 绑定修饰符就可以实现 props 的双向数据绑定。

• 在 vue2.0 中移除了组件的 props 的双向数据绑定功能，如果需要双向绑定需要自己来实现。
  在 vue2.0 中组件的 props 的数据流动改为了只能单向流动，即只能由（父组件）通过组件的 v-bind：attributes 传递给（子组件），子组件只能被动接收父组件传递过来的数据，并在子组件内不能修改由父组件传递过来的 props 数据。

• 官方文档解释：

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的，但是在某些时候我们确实需要从组件内部修改props的需求

在 Vue2.0 中，实现组件属性的双向绑定方式（算不上是绑定了，算是异步修改）， 可使用如下方法

• v-model 指令或 .sync 修饰符
• 将修改属性的方法通过 v-bind 传给子组件调用，子组件直接按方法使用即可
• 将修改属性的方法通过 v-on 传递给子组件调用，使用 $emit() 实现回调修改
• 或者使用 this.$parent 去修改

3. 解决方案: 使用 v-on 明确实现修改方式

也是为了代码可读性

不要直接修改从父组件传过来的 props 数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。如下：

• B 组件接受 A组件的参数

name: "B",
props: {father: {type: String,default: null}
}
data(){return{father_a : this.father}
}