在组件之间传递对象

Question

我打算对我的对象执行以下操作。 希望即使代码不起作用，您也会理解其意图。

我在 Nested.svelte 中有具有以下坐标的组件：

<script lang=ts>
    export let pos: {
        x: number,
        y: number,
    }
</script>

我的程序中的每个嵌套组件在 App.svelte 中如下所示：

{#each objects as object}
    <Nested bind:pos.x={object.geometry.x} bind:pos.y={object.geometry.y}
{/each}

objects变量是具有以下结构的存储值：

objects.geometry = [
    {
        x,
        y,
    }, {
        x,
        y,
    } ...
]

问题在于将objects.geometry.x和objects.geomtry.y从 App 发送到 Nested 组件。 我给出的以下代码不起作用，我发现唯一可行的解决方案是将 object 作为一个整体发送： <Nested bind:pos={objects.geometry}> 。 此解决方案不允许我将 App 中的特定值绑定到 Nested 中的特定值。 这也迫使我将objects变量中的变量命名为与 Nested.svelte ( x和y ) 中的坐标值相同的名称。

是否有另一种方法可以将对象结构化数据发送到组件中？ 像<Nested bind:pos.x={object.geometry.x} bind:pos.y={object.geometry.y}这样的东西？

Answer 1

这是不支持的。

你要么不必使用绑定（无论如何你很少应该使用它们），然后你可以内联一个 object：

{#each objects as object}
    <Nested pos={{ x: object.geometry.x, y: object.geometry.y }} />
{/each}

或者您必须将pos拆分为顶级道具x / y 。

Answer 2

您可以做的是导出您的x和y并从中构建您自己的pos变量，如下所示：

export let x;
export let y;

$: pos = new Proxy({x, y}, {
    set: (_obj, key, value) => {
        if (key === "x") x = value;
        else if (key === "y") y = value;
        else return false;
        return true
    }
})

重复
（如果您不需要写入pos ，您也可以使用$: pos = { x, y };它将保持最新，但是由于您使用了 bind 我假设您想要双向绑定）

但我建议只使用x和y 。