08-Vue:组件name属性、购物车案例

1.组件name属性

可以用组件的name属性值，来注册组件名字
问题：组件名不是可以随便写的？
我们封装的组件–可以自己定义name属性组件名-让使用者有个统一的前缀风格

2.购物车

项目初始化

vue create shopcar
yarn add bootstrap
yarn add less less-loader@5.0.0 -D

清空不要的东西：
1.把项目拆分成几个组件，components下创建: MyHeader、MyFoot、MyGood、MyCount；
2.创建的组件引入到HomeView.vue上；
3.main.js中引入bootstrap库；

// 引入第三方包里的css文件
import ‘bootstrap/dist/css/bootstrap.css’

布局
头部自定义
头部的标题 颜色 背景色可以随便更改 props类型校验
步骤:
1.在MyHeader.vue中定义props;
2.在使用MyHeader.vue组件时，传入相应的值(color,backgroundColor)

请求数据
1.下载axios并全局配置;
2.HomeView.vue组件中请求数据;
3.把数据传递给MyGood组件 渲染 并传递给数量组件

商品选中

数量控制
点击 + - 按钮 直接修改数量的输入框修改数量

<template>
  <div class="my-counter">
    <button @click="obj.goods_count++" type="button" class="btn btn-light">
      +
    </button>
    <input type="number" v-model="obj.goods_count" class="form-control inp" />
    <button
      :disabled="obj.goods_count === 1"
      @click="obj.goods_count > 1 && obj.goods_count--"
      type="button"
      class="btn btn-light"
    >
      -
    </button>
  </div>
</template>

<script>
export default {
  props: {
    obj: Object,
  },
  watch: {
    obj: {
      deep: true,
      handler() {
        if (this.obj.goods_count < 1) {
          this.obj.goods_count = 1;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
  }
}
</style>

全选反选
1.点击获取它的选中状态;
2.同步给上面每个小选框 --小选框的选中状态又在数组里 子传父;
3.把数组传给My-Foot

总数量

<template>
  <div class="my-footer">
    <!-- 全选 -->
    <div class="custom-control custom-checkbox">
      <input
        type="checkbox"
        class="form-check-input"
        v-model="isAll"
        id="footercheckbox"
      />
      <label for="footercheckbox" class="custom-control-label">全选</label>
    </div>
    <!-- 合计 -->
    <div>
      <span>合计</span>
      <span class="price">￥{{ allPrice }}</span>
    </div>
    <!-- 结算 -->
    <button type="button" class="footer-btn btn btn-primary">
      {{ allCount }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
  computed: {
    isAll: {
      set(val) {
        // 同步到每一个小框
        this.$emit("changeAll", val);
      },
      get() {
        return this.list.every((item) => item.goods_state === true);
      },
    },
    allCount() {
      // 总数量
      return this.list.reduce((sum, item) => {
        if (item.goods_state === true) {
          sum += item.goods_count;
        }
        return sum;
      }, 0);
    },
    allPrice() {
      // 总价格
      return this.list.reduce((sum, item) => {
        if (item.goods_state === true) {
          sum += item.goods_count * item.goods_price;
        }
        return sum;
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
.my-footer {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: #fff;
  .price {
    color: red;
    font-weight: bold;
    font-size: 14px;
  }
  .footer-btn {
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 25px;
    padding: 0;
  }
}
</style>