Javascript Svelte：通过更改绑定变量替换嵌套组件

我正在写Svelte项目，其中我有Message组件，它代表一些js对象

可以编辑此对象。为此，我决定使用两个嵌套组件MessageEditable和MessageReadable

根据消息组件状态，它们应相互替换

问题是，当我试图保存编辑和编辑的结果时 通过将isEditing属性设置为false，将MessageEditable更改为MessageReadable：

我犯了错误还是这是正常行为？绑定是一种好方法，还是与父组件交换值更为理想

信息：

<div class="message">

    {#if isEditing}
    <MessageEditable bind:message bind:isEditing />
    {:else}
    <MessageReadable {message}/>
    {/if}

    <div class="message__controllers">
        <button on:click="set({isEditing: true})">Edit</button>
    </div>
</div>

<script>
    import MessageEditable from './MessageEditable.html';
    import MessageReadable   from './MessageReadable.html';

    export default {
        components:{
            MessageEditable,
            MessageReadable,
        },
        data:() => ({
            message:{
              id: '0',
              text: 'Some message text.'
            },
            isEditing: false,
        }),

    }
</script>

{#如果正在编辑}
{:else}
{/if}
编辑
从“/MessageEditable.html”导入MessageEditable；
从“/MessageReadable.html”导入MessageReadable；
导出默认值{
组成部分：{
消息可编辑，
信息可读，
},
数据：（）=>({
信息：{
id:'0'，
文本：“一些消息文本。”
},
i编辑：错，
}),
}

消息可编辑：

<form  class="message-editable" on:submit>
    <label><span >text</span><input  type="text"  bind:value=message.text required></label>
    <label><span>id</span><input  type="text" bind:value=message.id required></label>
    <div><button type="submit">Save</button></div>
</form>

<script>
    export default {
        events:{
            submit(node){
                node.addEventListener('submit', (event) => {
                   event.preventDefault();

                   this.set({isEditing: false});
                });
            },
        },
    };
</script>

文本
身份证件
拯救
导出默认值{
活动：{
提交（节点）{
node.addEventListener（'submit'，（事件）=>{
event.preventDefault（）；
this.set（{isEditing:false}）；
});
},
},
};

信息可读：

<div class="message-readable">
    <p><span>text: </span>{message.text}</p>
    <p><span>id: </span>{message.id}</p>
</div>

text:{message.text}

id:{message.id}

使用方法可能比使用自定义事件处理程序更好，因为您要在提交时执行操作。我在REPL中测试了这段代码，没有遇到您遇到的错误。我将您的事件更改为方法属性，并删除了节点功能

<form  class="message-editable" on:submit="save(event)">
    <label><span >text</span><input  type="text"  bind:value=message.text required></label>
    <label><span>id</span><input  type="text" bind:value=message.id required></label>
    <div><button type="submit">Save</button></div>
</form>

<script>
    export default {
        methods: {
            save(event){
                event.preventDefault();
                this.set({isEditing: false});
            },
        },
    };
</script>

文本
身份证件
拯救
导出默认值{
方法：{
保存（事件）{
event.preventDefault（）；
this.set（{isEditing:false}）；
},
},
};