Vue2.x和Vue1.x比较大的一个改变是，Vue2.x通过props传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。这样设计是为了尽可能的让父子元素解耦，避免子元素无意中修改了父组件的状态。
业务中经常遇到两种需要改变props的情况：
1?? 父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域内可以随意使用和修改。 ===》 在组件data内再声明一个数据，引用父组件的prop
<div id="app">
<my-component2 :init-count=‘1‘ ></my-component2>
</div>
//组件2 单向数据流-需要prop改变的情况1:父组件传递初值给子组件，子组件将他作为初始值保存起来，在自己的作用域下可以任意修改
var component2 = {
props:[‘initCount‘],
template:‘<div>{{count}}</div>‘,
data:function(){
return{
count:this.initCount
}
}
}
2?? prop作为需要被转变的原始值传入 ===》 用计算属性
<div id="app">
<my-component3 :font-size="50"></my-component3>
</div>
//组件3 单向数据流-需要prop改变的情况2：prop作为需要被改变的原始值传入（这种情况使用计算属性）
var component3 = {
props:[‘fontSize‘],
template:‘<div :style="style">bilibili</div>‘,
computed:{
style:function(){
return{
fontSize:this.fontSize+‘px‘
}
}
}
}
原文：https://www.cnblogs.com/zhoujingye/p/13367377.html