vue3 setup 语法糖写法

内容进行简化，仅作为参考，不要直接拷贝使用

子组件

<script setup>
  let calendar;// 其他地方进行了赋值
  // 定义事件1
  const emit = defineEmits([
    'onDateSelect',
    'onEventClick',
  ])
  const onDateSelect=(selectInfo)=>{
    emit('onDateSelect',selectInfo)
  }
  const onEventClick=(selectInfo)=>{
    emit('onEventClick',selectInfo)
  }
   // 定义事件2 
  const emit2 = defineEmits<{
    (e: 'done', info?: number): void
  }>()
  // 触发事件，针对定义事件2
  emit2("done",1)
  // 定义属性
  const props =defineProps({
    initialView:{
      type:String,
      default:"dayGridMonth",
    },
    dayMaxEvents:{
      type:[Boolean,Number],
      default:true,
    },
  })
  // 暴露出去的内容
  defineExpose({
    refetchEvents(){
      console.log("刷新")
      calendar.refetchEvents()
    }
  })
</script>

父组件调用

<template>
    <!-- 组件属性(使用冒号)、事件(使用@)、以及暴露接口的调用对象 --> 
    <Calendar ref="calendarObj"  @onDateSelect="handleDateSelect" @onEventClick="handleEventClick" />
</template>
<script setup>
import { onMounted ,reactive,ref} from 'vue'
let reactiveData=reactive({"display":false})
// 事件
const handleDateSelect=(selectInfo)=>{
  // 省略不少内容
}
// 事件
function handleEventClick(clickInfo) {
  // 省略不少内容
}
// 组件内函数经过暴露调用
const calendarObj=ref()
// 或者这样写避免报错 ChildComponent：组件名字
const calendarObj=ref<InstanceType<typeof ChildComponent>>(null)
function testButton(){
    calendarObj.value.refetchEvents()
}
</script>