1-5、组件父传子，渲染数据

 Good:

      <div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <!-- 用:checked="state" 而不用 v-model:"变量"-->
        <input type="checkbox" class="custom-control-input" 
        :id="'cb' + id" :checked="state" @change="stateChange" />
        <label class="custom-control-label" :for="'cb' + id">
          <!-- 商品的缩略图 -->
          <img :src="pic" alt="" />
        </label>
      </div>

prop和data同级和methods

  props: {
    // 商品的 id
    // 为啥在这里要封装一个 id 属性呢？
    // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
    // 通知父组件根据 id 修改对应商品的勾选状态。
    //      required: true, 是“必须”传的
    id: {
      required: true,
      type: Number
    },
    // 要渲染的商品的标题
    title: {
      default: '',
      type: String
    },
    // 要渲染的商品的图片
    pic: {
      default: '',
      type: String
    },
    // 商品的单价
    price: {
      default: 0,
      type: Number
    },
    // 商品的勾选状态
    state: {
      default: true,
      type: Boolean
    },
    // 商品的购买数量
    count: {
      type: Number,
      default: 1
    }
  },

App.vue

        <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"
        ></Goods>

      data() {
        return {
          // 用来存储购物车的列表数据，默认为空数组
          list: []
        }
      },

        // 封装请求列表数据的方法
        async initCartList() {
          // 调用 axios 的 get 方法，请求列表数据
          const { data: res } = await axios.get('https://www.escook.cn/api/cart')
          // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
          if (res.status === 200) {
            this.list = res.list
          }
        },