Svelte组件交互问题：内嵌按钮无法关闭Modal组件

问题出在哪 #

你的Modal组件只实现了当showModal为true时打开弹窗的逻辑，但没有处理showModal变为false时关闭弹窗的逻辑。

点击内部“CLOSE MODAL”按钮时，虽然把父组件的showModal改成了false，但Modal里的<dialog>元素并没有收到关闭指令，所以弹窗不会消失。而点击背景能关闭，是因为你给<dialog>绑定了on:click|self={() => dialog.close()}，这个操作会触发<dialog>的close事件，进而执行on:close={() => showModal = false}完成状态同步。

如何从Modal内部关闭它 #

修改Modal组件的反应式逻辑，让showModal的状态变化完全同步到<dialog>的显示状态：

<script lang="ts">
    export let showModal: boolean;
    let dialog: HTMLDialogElement;

    // 同步showModal与dialog的状态：true打开，false关闭
    $: if (dialog) {
        showModal ? dialog.showModal() : dialog.close();
    }
</script>

<!-- 其余代码保持不变 -->
<dialog
    bind:this={dialog}
    on:close={() => (showModal = false)}
    on:click|self={() => dialog.close()}
    class="backdrop:bg-slate-500/30 backdrop:dark:bg-slate-200/10"
>
    <slot />
</dialog>

这样修改后，当你点击内部按钮把showModal设为false时，反应式语句会立即调用dialog.close()关闭弹窗，同时<dialog>的close事件会再次同步showModal状态（不会产生冲突，因为此时值已经是false）。

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