在組件之間傳遞對象

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 。