Vue组件跨组件模态框控制失效求助（Laravel+Inertia）

使用Laravel、Vue和Inertia开发用户账户编辑页面时，遇到一个问题：封装为可复用组件的模态框，自带的演示按钮能正常控制其显示与隐藏，但将开关按钮放置在模态框组件外的Card_Header组件中时，开关功能完全失效。

原组件代码 #

UpdateInfo.vue

<script setup>
import Card_Header from "../../../Components/Card_Header.vue";
import Modal from "../../../Components/Modal.vue";
import { router, useForm } from "@inertiajs/vue3";
</script>

<template>
    <Head title=" || Update Info" />
    <div class="card">
        <div class="card-content">
            <Card_Header title="Your Details" />
            <Modal>
                <!-- modal content -->
            </Modal>
        </div>
    </div>
</template>

Card_Header.vue

<script setup>
defineProps({
title: String,
}); 
</script>

<template>
    <nav class="level is-mobile">
        <div class="level-left">
            <div class="level-item">
                <h3 class="subtitle is-size-4">{{ title }}</h3>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <button class="button" @click="openModal = !openModal">Edit</button>
            </div>
        </div>
    </nav>
</template>

Modal.vue

<script setup>
import { onMounted, ref } from "vue";

const props = defineProps({})

const openModal = ref(false)
</script>

<template>
<button class="button" @click="openModal = !openModal">Demo button, delete later</button>
    <div class="modal" :class="{ 'is-active': openModal }">
        <div class="modal-background"></div>
            <div class="modal-content">
                <div class="card">
                    <div class="card-content">
                        <slot />
                    </div>
                </div>
            </div>
        <button class="modal-close is-large" aria-label="close" role="button" @click="openModal = !openModal"></button>
    </div>
</template>

问题原因 #

Modal组件内部维护的openModal是局部状态，Card_Header作为独立的兄弟组件，无法直接访问和修改这个状态，因此点击Card_Header中的按钮无法触发模态框的显隐切换。

解决方案：组件状态共享与事件传递 #

将模态框的显隐状态提升到父组件UpdateInfo.vue中统一管理，通过Vue的props和emit实现组件间的状态传递与事件通知。

1. 修改UpdateInfo.vue

将状态提升到父组件，处理子组件的事件，并传递状态给Modal：

<script setup>
import Card_Header from "../../../Components/Card_Header.vue";
import Modal from "../../../Components/Modal.vue";
import { router, useForm } from "@inertiajs/vue3";
import { ref } from "vue";

// 父组件统一管理模态框状态
const isModalOpen = ref(false);

// 切换模态框状态的方法
const toggleModal = () => {
    isModalOpen.value = !isModalOpen.value;
};
</script>

<template>
    <Head title=" || Update Info" />
    <div class="card">
        <div class="card-content">
            <!-- 将切换方法通过emit传递给Card_Header -->
            <Card_Header title="Your Details" @toggle-modal="toggleModal" />
            <!-- 将状态和切换方法传递给Modal -->
            <Modal :open="isModalOpen" @close="toggleModal">
                <!-- modal content -->
            </Modal>
        </div>
    </div>
</template>

2. 修改Card_Header.vue

定义emit事件，点击按钮时通知父组件切换状态：

<script setup>
defineProps({
    title: String,
}); 
// 定义emit事件
const emit = defineEmits(['toggle-modal']);
</script>

<template>
    <nav class="level is-mobile">
        <div class="level-left">
            <div class="level-item">
                <h3 class="subtitle is-size-4">{{ title }}</h3>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <!-- 点击时触发emit事件 -->
                <button class="button" @click="emit('toggle-modal')">Edit</button>
            </div>
        </div>
    </nav>
</template>

3. 修改Modal.vue

接收父组件传递的状态，通过emit触发关闭事件：

<script setup>
import { onMounted } from "vue";

// 接收父组件传递的open状态
const props = defineProps({
    open: Boolean
});
// 定义关闭事件的emit
const emit = defineEmits(['close']);
</script>

<template>
    <!-- 移除演示按钮，或保留并绑定emit -->
    <!-- <button class="button" @click="emit('close')">Demo button, delete later</button> -->
    <div class="modal" :class="{ 'is-active': open }">
        <div class="modal-background" @click="emit('close')"></div>
            <div class="modal-content">
                <div class="card">
                    <div class="card-content">
                        <slot />
                    </div>
                </div>
            </div>
        <button class="modal-close is-large" aria-label="close" role="button" @click="emit('close')"></button>
    </div>
</template>

这样修改后，Card_Header中的"Edit"按钮就能正常控制模态框的显隐，同时保持Modal组件的复用性。

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