Vue2.x通過props傳遞數據是單向的了，也就是父組件數據變化時會傳遞給子組件，但是反過來不行。
業務中會經常遇到兩種需要改變prop的情況，
一種是父組件傳遞初始值進來，子組件將它作為初始值保存起來，在自己的作用域下可以隨意使用和修改。這種情況可以在組件data內再聲明一個數據，引用父組件的prop，示例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <my-component :init-count="1"></my-component> </div> <script> Vue.component('my-component',{ props:['init-count'], template:'<div>{{count}}</div>', data:function(){ return { count:this.initCount } } }) new Vue({ el:'#app', }) </script> </body> </html>
組件中聲明了數據count，它在組件初始化時會獲取來自父組件的initCount，之后就與之無關了，只用維護count，這樣就可以避免直接操作initCount。
另一種情況就是prop作為需要被轉變的原始值傳入。這種情況用計算屬性就可以了，示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <mynew-component :width="100"></mynew-component> </div> <script> Vue.component('mynew-component',{ props:['width'], template:'<div :style="style">組件內容</div>', computed:{ style:function(){ return { width:this.width+'px', background:'lightgray', textAlign:'center' } } } }) new Vue({ el:'#app', }) </script> </body> </html>
注意：
在JavaScript中對象和數組是引用類型，指向同一個內存空間，所以props是對象和數組時，在子組件內改變是會影響父組件的。
//如此解決引用傳遞
1：var newObject = jQuery.extend(true, {}, oldObject);
2：
var
obj={};
obj=JSON.parse(JSON.stringify(oldObject
));