Foo.uvue

<template>
  <view class="page">
    <slot name="header" :num="num"></slot>
    <slot :msg="msg"></slot>
    <slot name="footer" :arr="arr"></slot>
    <text id="check-use-slots-res" class="uni-common-mt">check useSlots result: {{ checkUseSlotsRes }}</text>
    <button id="check-use-slots-btn" class="uni-common-mt" @click="checkUseSlots">
      check useSlots
    </button>
  </view>
</template>

<script setup>
  const num = ref<number>(0);
  const msg = ref('default msg');
  const arr = ref<string[]>(['a', 'b', 'c']);

  const slots = defineSlots<{
    default(props : { msg : string }) : any;
    header(props : { num : number }) : any;
    footer(props : { arr : string[] }) : any;
  }>();

  const slotsByUseSlots = useSlots();

  const checkUseSlotsRes = ref(false);
  const checkUseSlots = () => {
    checkUseSlotsRes.value =
      slots === slotsByUseSlots &&
      slotsByUseSlots['default'] !== null &&
      slotsByUseSlots['header'] !== null &&
      slotsByUseSlots['footer'] !== null;
  };
</script>