Vue小項目二手書商城：（四）詳情頁和購物車（emit、prop、computed）
阿新 • • 發佈：2019-03-14
如果 png 商品 font toc rdquo vue 修改 定義
實現效果：
- 點擊對應商品，對應的商品詳情頁出現，詳情頁裏面還有“Add to cart”按鈕和“×”退出按鈕。
- 點擊“Add to cart”可以將商品加入購物車，每件商品只能添加一次，如果把購物車的對應商品刪除就能再次加入。
- 商品加入購物車後，導航欄會出現商品數量和總價標識。
一.詳情頁的實現和其中的方法
1.在子組件literature.vue中寫：
- 應該加一個data先定義一下selecGoods，但是prop中已經有了（prop優先級更高，而且可以父子傳參），那就不用在data中寫selecGoods了
- 子組件中addTocart方法中用了$emit把selectGoods數據傳給父組件
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小項目二手書商城：（四）詳情頁和購物車（emit、prop、computed）