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