vue3 ts setup父子组件传值

问题描述：
使用<script lang="ts" setup>标签 获取ref总是找不到，起初我以为是传染子组件先后顺序问题 增加一个setTimeout 和nexttick，但是还是找不到ref。
查看资料看到这种写法增加了三个语法糖（父子组件通信）使用defineEmit,defineProps,defineExpose

这里我主要是想父组件 调用子组件的方法，所以使用defineEmit还有获取ref所以使用defineExpose

父组件

<template>
  <div class="table">
    <DelModal ref="delModal" @on-emit-delete="onDel" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { Button, Switch } from 'ant-design-vue';
  import { BasicTable } from '/@/components/Table';
  import { useData } from '../use/index';
  import DelModal from '../modal/index.vue';

  // const props = defineProps({});
  let { registerTable } = useData();
  const checked = ref<boolean>(false);
  const delModal = ref();
  const delHandle = (row) => {
    // visible.value = true;
    nextTick(() => {
      delModal.value.showModal(row);
    });
  };
  // 删除操作
  const onDel = (param) => {
    console.log('param:', param);
  };
</script>

子组件
子组件主要使用：

defineExpose({
   showModal,
 });
const emit = defineEmits({
  onEmitDelete: null,
});
emit('onEmitDelete', { id: oneMsg.value.id, param: form.delId });

子组件正文：

<template>
  <div class="model">
    <Modal
      v-model:visible="visible"
      title="请选择删除原因"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
      :destroyOnClose="true"
      @cancel="cancelHideModal"
    >
      <p><span style="color: red">*</span>删除原因</p>
      <Select
        v-model:value="form.delId"
        style="width: 210px"
        :options="getOptions"
        placeholder="请选择删除原因"
        allow-clear
        @change="getChange"
      />
      <p v-show="isRedP" style="color: red">删除原因不能为空</p>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, defineExpose } from 'vue';
  import { Modal, Select } from 'ant-design-vue';

  // const props = defineProps({});
  let form = reactive({
    delId: undefined,
  });
  const visible = ref<boolean>(false);
  const isRedP = ref(false);
  const getOptions = ref([
    {
      label: '原因1',
      value: 11,
    },
    {
      label: '原因2',
      value: 22,
    },
    {
      label: '原因3',
      value: 33,
    },
  ]);
  const oneMsg = ref();

  const showModal = (row) => {
    visible.value = true;
    console.log('row:', row);
    oneMsg.value = row;
  };
  // 暴露方法
  defineExpose({
    showModal,
  });
  const emit = defineEmits({
    onEmitDelete: null,
  });

  const hideModal = () => {
    console.log('value1:', form.delId);
    if (form.delId === undefined) {
      // alert('删除原因不能为空');
      isRedP.value = true;
    } else {
      emit('onEmitDelete', { id: oneMsg.value.id, param: form.delId });
      visible.value = false;
      form.delId = undefined;
    }
  };
  const cancelHideModal = () => {
    form.delId = undefined;
  };
  const getChange = (param) => {
    console.log('param:', param);
    if (param !== undefined) {
      isRedP.value = false;
    } else {
      isRedP.value = true;
    }
  };
</script>

<style lang="less" scoped></style>

在父组件中调用子组件时，这里通过ref找到子组件里所有方法