单向数据流

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'
                    }
                }
            }
        }

单向数据流

推荐阅读