svelte - 是否可以直接在 Svelte 3 中绑定对象字段？

Question

有没有办法在 Svelte 3 中绑定对象字段？

例子：

<script>
  import MyComponent from "./MyComponent.svelte"
  let myobjectID
</script>

<MyComponent bind:myobject[id]={myobjectID}>

<!-- Where myobject == {id: "123", name: "myName", and so on...} -->

这可能吗？

Answer 1

不，没有。

如果您想MyComponent在内部使用对象，但只允许使用者更改该对象的特定部分，您可以执行以下操作：

App.svelte

<script>
  import MyComponent from "./MyComponent.svelte"
  let myobjectID
</script>

<MyComponent bind:id={myobjectID} />

MyComponent.svelte

<script>
    export let id
    $: myobject = {
        id,
        name: 'myName'
    }
</script>

但是一种更通用的方式，您可以这样做，因为不存在任何属性myobject，在这种情况下，您最好不要在内部为您的组件使用对象，而是在需要时将其构造为对象。

Answer 2

svelte 没有内置方法可以做到这一点，但这里有一个解决方法：

<script>
    import MyComponent from './MyComponent.svelte';
    let myobjectID = 1;
    $: myObject = {...myObject, id: myobjectID}
</script>
<MyComponent bind:myobject={myObject} />

解决方案是创建一个响应式语句，该语句采用所有myobject属性并将它们分配给myObjectApp.svelte 中的局部变量，然后分配该id属性，然后将绑定到该属性myobject并使其随着更改而myobjectID更改。