先簡單的介紹下業(yè)務安疗，項目是SPA應用，列表數(shù)據(jù)打開詳情時够委，在詳情頁中的子組件需要得到父組件中的動態(tài)數(shù)據(jù)(請求返回的數(shù)據(jù))荐类，然后在子組件中展示，那么茁帽，如果使用this.$parent.data的方式玉罐，只能獲取到父組件中定義的靜態(tài)數(shù)據(jù)。如何獲取到父組件中請求到的動態(tài)數(shù)據(jù)呢潘拨？先看下官網對計算屬性的定義：
Paste_Image.png
計算屬性實時追蹤它的相應依賴吊输，依賴關系值發(fā)生變化，對應的計算屬性值也會發(fā)生變化铁追。
看下項目中的錯誤的例子：
父組件：
Paste_Image.png
定義了一個info數(shù)據(jù)對象季蚂，里面初始的name值為11，在響應當前界面時，通過route去修改info對象的值扭屁。
子組件：
Paste_Image.png
當父組件響應時算谈，我們已經通過route去修改了info數(shù)據(jù)對象的值，但是如果通過這種方式子組件調用父組件的數(shù)據(jù)料滥，只會得到父組件初始化定義的靜態(tài)值然眼。
子組件添加計算屬性：
Paste_Image.png
通過計算屬性的方式，子組件會監(jiān)聽父組件中name的值葵腹，一旦父組件中info數(shù)據(jù)對象的name值發(fā)生變化高每，子組件也能快速的得到相應后的值。
vue官網不建議在組件中直接引用父組件的數(shù)據(jù)践宴，建議還是直接使用props的方式向子組件傳遞數(shù)據(jù)鲸匿，好吧，如果覺得抽象不好理解浴井，那么看下效果圖吧。
22.gif
