SvelteKit项目中官方Svelte模态组件无法从父组件关闭

问题出在Modal组件的响应式逻辑仅处理了打开模态框的场景，未覆盖关闭的逻辑。当父组件将showModal设为false时，Modal组件没有触发对话框的关闭操作，导致模态框保持打开状态。

步骤1：修复Modal组件的响应式逻辑 #

修改Modal.svelte的<script>部分，补充showModal为false时关闭对话框的逻辑：

<script>
    export let showModal; // boolean

    let dialog; // HTMLDialogElement

    // 同步处理模态框的打开与关闭
    $: if (dialog) {
        showModal ? dialog.showModal() : dialog.close();
    }
</script>

步骤2：完善父组件的"No"按钮功能 #

在App.svelte中给"No"按钮添加点击事件，使其也能关闭模态框：

<button on:click={() => showModal = false}>No</button>

原理说明 #

• 双向绑定bind:showModal已正确建立，父组件修改showModal的值会同步到子组件。补充关闭逻辑后，子组件能响应showModal的变化，自动执行对话框的关闭操作。
• 原代码仅在showModal为true时调用dialog.showModal()，缺少对showModal变为false时的处理，这是模态框无法关闭的核心原因。

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