Question

我正在编写 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>

MessageEditable：

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

MessageReadable：

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

Answer 1

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

class RootViewController: UISplitViewController {

override func viewDidLoad() {
    super.viewDidLoad()
}

override func viewWillAppear(_ animated: Bool) {
    self.preferredDisplayMode = UISplitViewControllerDisplayMode.allVisible

    UINavigationBar.appearance().barTintColor = UIColor(red: 0.05, green: 0.14, blue: 0.38, alpha: 1)
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
    UIBarButtonItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.white], for: .normal)
}

@objc func displayTableView(notification: NSNotification) {
    self.maximumPrimaryColumnWidth = 320
    self.preferredDisplayMode = UISplitViewControllerDisplayMode.allVisible
}

@objc func hideTableView(notification: NSNotification) {
    self.preferredDisplayMode = UISplitViewControllerDisplayMode.primaryHidden
}

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

苗条：通过更改绑定变量

1 个答案: