实现效果:
点击对应商品, 对应的商品详情页出现, 详情页里面还有 "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. 购物车
来源: http://www.bubuko.com/infodetail-2987368.html