vue3的三个祖孙三代弹窗 父组件打开子组件 父组件会隐藏 子组件打开孙组件 子组件会隐藏 但是同时父组件也会打开了

在 Vue3 中，创建一个涉及祖孙三代弹窗的场景通常需要用到组件嵌套、props 和生命周期钩子来管理状态。这里假设我们有一个祖父组件（Grandparent）、父亲组件（Parent），以及孙子组件（Child）。以下是一个简化的示例：

**祖父组件 (Grandparent.vue)**:

<template>
  <div>
    <button @click="showParent">打开父组件</button>
    <child :visible.sync="isParentVisible"></child>
  </div>
</template>

<script setup>
import Child from './Child.vue';
const isParentVisible = ref(false);
function showParent() {
  isParentVisible.value = true;
}
</script>

**父亲组件 (Parent.vue)**:

<template>
  <transition name="fade">
    <div v-if="isShown" @close="hide">
      <!-- 子组件 -->
      <child :visible.sync="isChildVisible"></child>
    </div>
  </transition>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import Child from '../Child.vue';

const isChildVisible = ref(false);
let childRef;

onMounted(() => {
  childRef = ref(null); // 存储子组件引用
});

async function hide() {
  isParentVisible.value = false; // 隐藏父组件时关闭子组件
  await childRef.value?.close(); // 如果有子组件实例，则调用其关闭方法
}

// 其他生命周期...
</script>

**孙子组件 (Child.vue)**:

<!-- 这里可以添加动画效果和关闭按钮 -->
<template>
  <transition name="fade">
    <div v-if="isVisible" @close="close">
      <!-- 根据需求自定义内容 -->
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  methods: {
    close() {
      this.$emit('close'); // 触发关闭事件，通知上层关闭自己
    },
  },
};
</script>

当你点击祖父组件的“打开父组件”按钮，父组件会显示并传递`isParentVisible`给子组件。当子组件的孙子组件被关闭时，它会通过`close`方法触发闭合自身，并将关闭信息传递给父组件，这时父组件也会隐藏。

**相关问题--:**
1. 如何处理父子组件间的通信？
2. 怎么避免组件循环引用导致的内存泄露？
3. 父组件为什么要等子组件关闭后再隐藏？