Svelte中表单消息Store失效：重复提交后无法重新显示消息

你遇到的问题核心是：关闭消息后，FormMsg组件内部的active变量保持为false，后续更新successMsg时，组件虽会更新msg属性，但active未重置，导致消息容器不显示。直接销毁组件会丢失过渡效果，以下是几种更优雅的处理方案：

方法一：监听msg变化自动重置显示状态 #

利用Svelte的反应式语句，在msg更新时自动把active重置为true，每次提交表单设置新消息时，组件会自动重新显示：

修改FormMsg的JS代码：

import {fade} from 'svelte/transition';

export let className;
export let msg;

let active = true;

// 当msg有值时，自动激活消息显示
$: if (msg) {
    active = true;
}

const handleClose = () => {
    active = false;
}

该方案最简洁，完全在组件内部处理状态，无需修改父组件逻辑，同时保留淡入淡出过渡效果。

方法二：父组件控制显示状态 #

把active作为props从父组件传入，让父组件统一管理消息的显示/隐藏状态，适合需要更精细控制的场景：

1. 修改FormMsg组件，添加active props并触发关闭事件：

import {fade} from 'svelte/transition';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

export let className;
export let msg;
export let active;

const handleClose = () => {
    // 通知父组件关闭消息
    dispatch('close');
}

+if('active')
    div(class!='{className}', transition:fade!='{{duration: 500}}')
        | {msg}
        .close(on:click!='{handleClose}') ✕

2. 父组件中维护显示状态，监听关闭事件：

+if('$successMsg')
    FormMsg(
        className='success-msg', 
        msg!='{$successMsg}', 
        active!='{$showSuccessMsg}', 
        on:close!='{() => showSuccessMsg = false}'
    )

提交表单时更新状态：

successMsg.set('The form has been saved');
showSuccessMsg = true;

方法三：使用key强制组件重建 #

通过给FormMsg添加key属性，每次消息内容变化时强制组件重新创建，这样active会重新初始化为true，同时保留过渡效果：

父组件修改：

+if('$successMsg')
    FormMsg(
        className='success-msg', 
        msg!='{$successMsg}', 
        key!='{$successMsg}'
    )

该方案简单直接，但会销毁重建组件，适合消息内容每次都不同的场景。

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