vue3.0组件class的传值使用问题

Question

如题，使用ant-design-vue2.0想做一个整页面遮罩加载，用了<a-spin>然后自己写了个遮罩框，想封装成组件，每次调用再传值让它显示，对vue3、ant-design-vue不熟悉，请各位大佬帮忙看看问题出在哪？
场景，点击按钮，遮罩出现
子组件Load.vue

<template>
  <!-- <div :class="{ loading_box: spinning }"> -->
  <div :class="{ loading_box: spinning }">
    <a-spin :size="size" :spinning="spinning" :tip="tip"></a-spin>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
  name: "Load",
  props: {
    spinning: {
      //是否展示spinning
      type: Boolean,
      required: true,
      default() {
        return false;
      },
    },
    size: {
      type: String,
      required: true,
      default() {
        return "default";
      },
    },
    tip: {
      type: String,
      required: true,
      default() {
        return "";
      },
    },
  },
  setup(props, context) {
    const spinning = props.spinning;
    const size = props.size;
    const tip = props.tip;
    const loading_box = ref("loading_box");
    console.log("Load组件获取到的spinning值是什么", props.size);
    console.log("Load组件props值是什么", props);

    return {
      spinning,
      size,
      tip,
      loading_box,
    };
  },
});
</script>
<style lang="less">
// @import "../assets/less/normal.less";

.loading_box {
  position: @position_ab;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
</style>

父组件

<template>
<a-config-provider
    :getPopupContainer="getPopupContainer"
    :autoInsertSpaceInButton="true"
  >
    <wLoad :size="size" :spinning="spinning" :tip="tip"></wLoad>
    <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :scroll-to-first-error="true"
        name="login-form"
      >
      <a-form-item :wrapper-col="{ span: 18, offset: 3 }">
          <a-button type="primary" @click="onSubmit" :block="true" size="large"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    ....
 </a-config-provider>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  getCurrentInstance,
} from "vue";
import wLoad from "../components/general/Load";
export default defineComponent({
// 注册组件
  components: {
    wLoad,
  },
  setup() {
   const spinning = ref(false);
    const size = ref("large");
    const tip = ref("...Loading");
  const onSubmit = () => {
       spinning.value = !spinning.value;
  }
  return {
     spinning,
      size,
      tip,
  }
  }
})
</script>