插槽改造购物车案例+API接口案例

插槽改造购物车案例

上一个vue写的简单的移动端购物车案例，其中里面的数量Counter组件使用比较麻烦，对页面重构使用插槽解决数量加减问题。

1.在Goods组件适当位置定义一个插槽。

   <!-- 商品的数量 -->
        <slot></slot>

2.在App组件中导入Counter组件

然后在商品Goods标签中插入Counter组件。

    <Goods
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :pic="item.goods_img"
      :price="item.goods_price"
      :state="item.goods_state"
      :count="item.goods_count"
      @state-change="getNewState"
    >
      <Counter></Counter>
    </Goods>

3.渲染初始数量值

在Couter组件中自定义属性

   //数量
    num: {
      default: 1,
      type: Number,
    },

作用域插槽