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

Question

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

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

它们应该相互替换，具体取决于 Message 组件状态。

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

image of error from console

是我弄错了还是这是正常现象？绑定是一种好的方法还是更适合与父组件交换值？

留言：

<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>

消息可编辑：

<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>

消息可读：

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

Answer 1

使用方法可能比自定义事件处理程序更好，因为您是在提交时执行操作。我在 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>

https://svelte.technology/repl?version=2.10.0&gist=d4c5f8e3864856d27a3aa8cb5b2e8710

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

Svelte: Replace nested component by changing binded variable

javascript

bind

svelte