实现效果:
点击对应商品,对应的商品详情页出现,详情页里面还有“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.购物车