vue3 加 ts 每次点击父组件 打开弹框子组件，子组件关闭后，父组件可以再次打开子组件 代码示例

在Vue3中，我们可以通过ref进行元素绑定，然后就可以获取到元素。如果需要在父组件中调用子组件的方法，我们需要在子组件中先通过defineExpose方法将父组件需要调用的方法进行导出，如此才能将该方法挂载到子组件实例上。在使用TypeScript时，我们需要在定义子组件的实例时使用InstanceType<typeof 子组件>的形式进行定义。下面是一个示例代码：

// 子组件
<template>
  <div>
    <button @click="open">打开子组件</button>
    <div v-if="show">
      <button @click="close">关闭子组件</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineExpose, ref } from 'vue';

export default defineComponent({
  setup() {
    const show = ref(false);

    const open = () => {
      show.value = true;
    };

    const close = () => {
      show.value = false;
    };

    defineExpose({
      close,
    });

    return {
      show,
      open,
    };
  },
});
</script>

// 父组件
<template>
  <div>
    <button @click="openChild">打开子组件</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null);

    const openChild = () => {
      childRef.value.open();
    };

    return {
      childRef,
      openChild,
    };
  },
});
</script>

在上面的代码中，我们在子组件中通过defineExpose方法将close方法导出，然后在父组件中通过ref获取到子组件实例，从而可以调用子组件中导出的close方法。当子组件关闭后，父组件可以再次打开子组件。