一、shopCart組件

(1) goods 父組件和 子組件 shopCart 傳參

deliveryPrice:{ // 單價 從json seller 對象數據中獲取 type:Number, default:0},minPrice:{ // 最低起送價 從json seller 對象數據中獲取 type:Number, default:20}

其中 deliveryPrice 和 minPrice 的數據都是從 data.json數據 中 seller 對象下 獲得。所以在goods 組件中還要 獲取到 seller對象 的數據，否則會報錯：

[Vue warn]: Error in render: "TypeError: Cannot read property 'deliveryPrice' of undefined"

解決方法：根組件 App.vue 中 router-view 組件獲取seller 數據，傳到 goods 組件中

1-1.app.vue (根組件 也是 goods 的父組件)

<keep-alive> <router-view :sell="sellerObj"></router-view></keep-alive>

注意：sellerObj 是data 定義 的 對象里用來接收 data.json 數據，相當于 實參

1-2.goods.vue (相對于跟組件的子組件 且 shopCart 的父組件)

通過props 屬性 進行組件之間的通信

props: {  sell: Object // 相當于 形參 },

1-3.shopCart.vue ( goods 的子組件)

<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>

(2) 選中商品 的 計算功能

1-1. 傳入用戶選中商品的集合

說明：從父組件會 傳入一個用戶選中商品的 數組，數組里會存放著 n 個對象，每個對象里存放著該 商品的 價格 和 數量。

props:{       // 通過父組件傳過來的 ( 相當于形參 ) selefoodsArr:{   // 用戶選中的商品存放在一個數組里  接收的是 data.json數據的 goods（數組） type:Array, // 當父組件傳過來的 類型是對象或者 是數組時， default 就是一個函數 default (){ return []  // 返回數組 存放著選中 商品 對應的 goods下的 foods 數組（由 父組件 的 實參 決定的返回值） }}

1-2. 利用計算屬性 選中商品數量的變化，商品總價，動態改變描述等功能

computed:{ totalPrice (){     //計算總價，超過起送額度后提示可付款 let total=0   // 定義一個返回值 this.selefoodsArr.forEach((rfoods) =>{ // 遍歷 這個 goods 數組 取到 價格 和 數量 （當然在這里數據庫沒有count 這個屬性，稍后 我們會利用 vue.set() 新建一個count 屬性）  total += rfoods.price * rfoods.count // 形參 rfoods 實參 是 foods }); return total; }, totalCount (){   // //計算選中的food數量，在購物車圖標處顯示，采用絕對定位，top：0；right：0；顯示在購物車圖標右上角   let count=0 this.selefoodsArr.forEach((rfoods) =>{ // 形參 rfoods 實參 是 foods  count += rfoods.count }); return count; }, payDesc (){    //控制底部右邊內容隨food的變化而變化，payDesc()控制顯示內容，enough 添加類調整顯示樣式 let diff = this.minPrice - this.totalPrice    if (!this.totalPrice) {     return `￥${this.minPrice}起送`    } else if (diff > 0) {     return `還差￥${diff}元`    } else {     return '去結算'    } }  }