vue3中多层弹窗的嵌套

在Vue3中实现多层弹窗的嵌套可以通过以下步骤实现：

1.在父组件中定义一个状态变量来控制弹窗的显示与隐藏。

2.在父组件中通过v-if指令来控制弹窗的显示与隐藏，同时通过v-bind指令将状态变量传递给子组件。

3.在子组件中定义一个状态变量来控制弹窗的显示与隐藏，同时通过props接收父组件传递的状态变量。

4.在子组件中通过v-if指令来控制弹窗的显示与隐藏，同时通过v-bind指令将状态变量传递给子组件的子组件。

5.重复以上步骤即可实现多层弹窗的嵌套。

示例代码如下：

// 父组件
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<modal :show="showModal" @close="showModal = false">
<h2>这是一个弹窗</h2>
<button @click="showSubModal = true">打开子弹窗</button>
<sub-modal :show="showSubModal" @close="showSubModal = false">
<h2>这是一个子弹窗</h2>
</sub-modal>
</modal>
</div>
</template>

<script>
import Modal from './Modal.vue'
import SubModal from './SubModal.vue'

export default {
components: {
Modal,
SubModal
},
data() {
return {
showModal: false,
showSubModal: false
}
}
}
</script>

// modal组件
<template>
<div v-if="show" class="modal">
<div class="modal-content">
<slot></slot>
<button @click="$emit('close')">关闭弹窗</button>
</div>
</div>
</template>

<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
}
}
</script>

// sub-modal组件
<template>
<div v-if="show" class="modal">
<div class="modal-content">
<slot></slot>
<button @click="$emit('close')">关闭子弹窗</button>
</div>
</div>
</template>

<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
}
}
</script>