关于Uniapp使用vant2购物sku组件的不兼容解决办法

开发中写到了购物车模块 子组件使用的是uniapp中的sku，每次子组件显示的时候就报错

一开始找了很多网友的其他写法也是一样得报错 

下图贴上子组件全部的代码 实在是没办法了 去看了下官方文档搜索报错发现vant2中的某些组件 如果在uniapp中使用的话不兼容，也就是一直报（Invalid handler for event "load": got undefined ）~~~~~~~~~~~！！！

此时只想真实vant官方为什么官方文档不进行提示；

解决办法！！！

后来换了种写法 下面附上全部sku子组件代码（兼容uniapp 放心食用）

<template>
  <div class="info">
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      buy-text="确定"
      add-cart-text="加入购物车"
      :show-add-cart-btn="false"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @sku-close="onSkuClose"
    >
      <template #sku-header="props">
        <view class="van-sku-header van-hairline--bottom">
          <view class="van-image van-sku-header__img-wrap" @click="">
            <image :src="goods.picture" class="van-image__img" style="object-fit: cover"></image>
          </view>
          <view class="van-sku-header__goods-info">
            <view class="van-sku__goods-price">
              <text class="van-sku__price-symbol"> ￥ </text>
              <text class="van-sku__price-num">{{ sku.price }}</text>
            </view>
            <view class="van-sku-header-item">
              <text
                >剩余 <text>{{ sku.stock_num }}</text> 件</text
              >
            </view>
            <view class="van-sku-header-item"> 请选择 非必选属性 未加价的属性项 </view>
          </view>
        </view>
      </template>
    </van-sku>
    <van-overlay class="goods-van-overlay" :show="showPreview" @click="showPreview = false">
      <div class="wrapper">
        <image :src="goods.picture" style="width: 100%" mode="widthFix"></image>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'skuTel',
  computed: {
    ...mapState(['flag']),
  },
  methods: {
    onSkuClose() {
      this.$emit('skuClose', '关闭');
    },
    onBuyClicked(data) {
      // this.$toast('buy:' + JSON.stringify(data));
      this.$emit('gotoConfimPg', '确认订单');
    },
    // onAddCartClicked(data) {
    //   this.$toast('add cart:' + JSON.stringify(data));
    // },
    // onBuyClicked(sku) {
    //   Toast('点击购买');
    //   this.$emit('gotoConfimPg', '确认订单');
    // },
  },
  watch: {
    showaaa: {
      handler(n, o) {
        this.show = n;
      },
      deep: true,
      immediate: true,
    },
  },
  destroyed() {},
  props: {
    showaaa: false,
  },
  data() {
    return {
      show: false,
      goodsId: '2259',
      quota: 0,
      quotaUsed: 1,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        list: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        price: '10.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        picture: '',
      },
      showPreview: false,
      previewImage: '',
      currentBuyType: '',
    };
  },
};
</script>

<style></style>