先簡單的介紹下業(yè)務(wù)，項目是SPA應(yīng)用，列表數(shù)據(jù)打開詳情時，在詳情頁中的子組件需要得到父組件中的動態(tài)數(shù)據(jù)(請求返回的數(shù)據(jù))，然后在子組件中展示，那么，如果使用this.$parent.data的方式，只能獲取到父組件中定義的靜態(tài)數(shù)據(jù)。如何獲取到父組件中請求到的動態(tài)數(shù)據(jù)呢？先看下官網(wǎng)對計算屬性的定義：

Paste_Image.png

計算屬性實時追蹤它的相應(yīng)依賴，依賴關(guān)系值發(fā)生變化，對應(yīng)的計算屬性值也會發(fā)生變化。

看下項目中的錯誤的例子：
父組件：

Paste_Image.png

定義了一個info數(shù)據(jù)對象，里面初始的name值為11，在響應(yīng)當前界面時，通過route去修改info對象的值。
子組件：

Paste_Image.png

當父組件響應(yīng)時，我們已經(jīng)通過route去修改了info數(shù)據(jù)對象的值，但是如果通過這種方式子組件調(diào)用父組件的數(shù)據(jù)，只會得到父組件初始化定義的靜態(tài)值。
子組件添加計算屬性：

Paste_Image.png

通過計算屬性的方式，子組件會監(jiān)聽父組件中name的值，一旦父組件中info數(shù)據(jù)對象的name值發(fā)生變化，子組件也能快速的得到相應(yīng)后的值。
vue官網(wǎng)不建議在組件中直接引用父組件的數(shù)據(jù)，建議還是直接使用props的方式向子組件傳遞數(shù)據(jù)，好吧，如果覺得抽象不好理解，那么看下效果圖吧。

22.gif