Nuxt3/Vue3：如何从Header组件调用显示Modal组件？

你的代码存在几个关键问题导致模态框无法正常工作，以下是逐点修复：

1. 修复组件间状态传递 #

Header组件中定义了showModal状态，但未传递给Modal组件；Modal组件虽声明了showModal属性，却未用它控制自身显示逻辑。

修改Header.vue #

给Modal组件传递状态，并监听关闭事件更新父组件状态：

<template>
    <header class="header sticky-top">
        <nav class="container-fluid navbar-light bg-light">
                <div class="row justify-content-start">
                    <div class="col text-end p-3">
                        <button @click="showModal = true" type="button" class="btn">Register</button>
                    </div>
                </div>
                <!-- 传递showModal状态，监听关闭事件 -->
                <Modal :show-modal="showModal" @close="showModal = false"/>
        </nav>
    </header>
</template>

<script lang="ts">
import Modal from '~~/components/Modal.vue';

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

2. 修复Modal组件的显示控制 #

Modal组件需根据父组件传递的状态控制显示，移除固定的show类（Bootstrap该类会强制显示模态框），并通过Vue事件处理关闭逻辑。

修改Modal.vue #

<template>
    <Teleport to="body">
        <!-- 根据showModal状态控制显示，动态添加Bootstrap的show类 -->
        <div 
            class="modal" 
            :class="{ show: showModal }" 
            tabindex="-1" 
            aria-labelledby="exampleModalLabel"
            v-show="showModal"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                        <!-- 触发关闭事件通知父组件 -->
                        <button type="button" class="btn-close" @click="$emit('close')" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <!-- 触发关闭事件 -->
                        <button type="button" class="btn btn-secondary" @click="$emit('close')">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加模态框遮罩，同步状态显示 -->
        <div class="modal-backdrop fade" :class="{ show: showModal }" v-show="showModal"></div>
    </Teleport>
</template>

<script lang="ts">
export default{
    props:{
        showModal: {
            type: Boolean,
            default: false
        }
    },
    emits: ['close'] // 声明触发的事件
}
</script>

3. SSR环境补充处理 #

如果你的Nuxt3项目启用了SSR，Teleport只能在客户端渲染，需用<ClientOnly>包裹Modal组件避免SSR报错：

<ClientOnly>
    <Modal :show-modal="showModal" @close="showModal = false"/>
</ClientOnly>

内容的提问来源于stack exchange，提问作者Vince