Vue小項目二手書商城：（四）詳情頁和購物車（emit、prop、computed）

實現效果：

• 點擊對應商品，對應的商品詳情頁出現，詳情頁裏面還有「Add to cart」按鈕和「×」退出按鈕。
• 點擊「Add to cart」能夠將商品加入購物車，每件商品只能添加一次，若是把購物車的對應商品刪除就能再次加入。
• 商品加入購物車後，導航欄會出現商品數量和總價標識。

一.詳情頁的實現和其中的方法

1.在子組件literature.vue中寫：

• 應該加一個data先定義一下selecGoods，可是prop中已經有了（prop優先級更高，並且能夠父子傳參），那就不用在data中寫selecGoods了
• 子組件中addTocart方法中用了$emit把selectGoods數據傳給父組件（$emit能在當前組件監聽到，當前組件定義在父組件上則至關於父組件監聽到）

2.在父組件App.vue中寫：

• 父組件中@add="addTocart"前面是子組件emit的，後面的隨便起名字（在父組件裏方法的名字）
• :selectGoods="selectGoods"使得我在父組件修改selectGoods的值，那子組件selectGoods也會改變（子組件中有prop）

• 也就是說子組件商品點擊加入購物車，selectGoods有數據
• $emit使數據傳給父組件，父組件要用selectGoods數據先在data中定義
• 父組件中有一個addTocart方法傳入的參數selectGoods是子組件的selectGoods，再將它傳給this.selectGoods，是父組件的selectGoods（能夠隨便起名字，要和data中的名字對應）

• 完成到這裏咱們實現了點擊商品會出現詳情頁
• 詳情頁中"addTocart"將商品加入購物車，數據存到selectGoods中，emit傳給父組件
• 父組件也能夠修改數據經過prop傳給子組件。

二.購物車頁的實現和其中的方法

既然selectGoods已經傳到父組件上，那麼我就直接把購物車寫在父組件裏，給購物車頁設一個show=false，點擊導航，購物車的show變true。

在父組件App.vue中寫：

1.導航

2.購物車

• Vue小項目二手書商城：（五）參考資料