Svelte 5（Runes模式）：子传父状态与派生值的实现问题

我有一个父组件，包含多个可拖拽的Item组件（最终会动态创建）。每个Item组件内部计算当前位置及派生的偏移值，希望拖拽任意Item时，能将其位置/偏移值响应式传递给父组件。

在Svelte 4用Stores实现很容易，但Svelte 5的Runes模式下遇到了困难。Context API不太适用，因为pos/offset本就属于Item组件内部状态。

当前代码存在两个问题：

• 通过绑定props传递位置（状态）给父组件可行，但派生的偏移值不行，原因是什么？
• 第二个Item组件挂载后，第一个Item与父组件的连接就丢失了，原因是什么？

简化代码 #

App.svelte #

<svelte:options runes="{true}" />

<script>
    import Item from './Item.svelte';

    let CURRENT = $state({pos: {x:99, y:99}, offset: 99});
</script>

<h1>Last dragged item: ({CURRENT.pos.x} / {CURRENT.pos.y}) Offset: {CURRENT.offset}</h1>

<Item bind:CURRENT={CURRENT} itemName='ONE' />
<Item bind:CURRENT={CURRENT} itemName='TWO' />

Item.svelte #

<svelte:options runes="{true}" />

<script>
    import interact from 'interactjs';

    let { CURRENT = $bindable(), itemName } = $props();
    let item;
    
    let pos = $state({x:0, y:0});
    let offset = $derived(Math.floor(Math.sqrt( Math.pow(pos.x,2) + Math.pow(pos.y,2) )));

    CURRENT.pos = pos;
    CURRENT.offset = offset;

    const handleDraggable = (node) => {
        interact(node).draggable({              
            onmove: (ev) => {
                let el = ev.target;
        
                let x = (parseFloat(el.getAttribute('data-x')) || 0) + ev.dx;
                let y = (parseFloat(el.getAttribute('data-y')) || 0) + ev.dy;
                
                el.style.webkitTransform =  el.style.transform = `translate(${x}px,${y}px)`;
                el.setAttribute('data-x', x);
                el.setAttribute('data-y', y);
                pos.x = x;
                pos.y = y;
            },
        });
    }
</script>

<div id="draggable" bind:this={item} use:handleDraggable> 
    <p>{itemName} ({pos.x} / {pos.y}) Offset: {offset}</p>
</div>

问题1：偏移值无法同步的原因 #

你只是在Item组件初始化时给CURRENT.offset赋值了一次offset（$derived值），但$derived的响应式仅作用于组件内部。当pos变化导致offset更新时，CURRENT.offset不会自动同步——因为没有建立持续的响应式关联，这只是一次性的赋值操作。

问题2：多组件挂载后连接丢失的原因 #

两个Item共享同一个父组件的CURRENT对象，当第二个Item初始化时，执行CURRENT.pos = pos会把父组件CURRENT.pos的引用替换成第二个Item内部的pos对象。此时第一个Item的内部pos和父组件的CURRENT.pos已经不是同一个引用，后续拖拽第一个Item时，修改的是自己的内部状态，自然无法同步到父组件。

修正后的代码 #

采用自定义事件传递更新，避免共享对象引用导致的冲突，同时确保响应式同步：

App.svelte #

<svelte:options runes="{true}" />

<script>
    import Item from './Item.svelte';

    let CURRENT = $state({pos: {x:99, y:99}, offset: 99});
</script>

<h1>Last dragged item: ({CURRENT.pos.x} / {CURRENT.pos.y}) Offset: {CURRENT.offset}</h1>

<Item on:update={(e) => {
    CURRENT.pos.x = e.detail.pos.x;
    CURRENT.pos.y = e.detail.pos.y;
    CURRENT.offset = e.detail.offset;
}} itemName='ONE' />
<Item on:update={(e) => {
    CURRENT.pos.x = e.detail.pos.x;
    CURRENT.pos.y = e.detail.pos.y;
    CURRENT.offset = e.detail.offset;
}} itemName='TWO' />

Item.svelte #

<svelte:options runes="{true}" />

<script>
    import interact from 'interactjs';
    import { $effect } from 'svelte';

    let { itemName } = $props();
    let item;
    
    let pos = $state({x:0, y:0});
    let offset = $derived(Math.floor(Math.sqrt( Math.pow(pos.x,2) + Math.pow(pos.y,2) )));

    // 监听pos/offset变化，向父组件发送更新事件
    $effect(() => {
        dispatch('update', { pos: {...pos}, offset });
    });

    const handleDraggable = (node) => {
        interact(node).draggable({              
            onmove: (ev) => {
                let el = ev.target;
        
                let x = (parseFloat(el.getAttribute('data-x')) || 0) + ev.dx;
                let y = (parseFloat(el.getAttribute('data-y')) || 0) + ev.dy;
                
                el.style.webkitTransform =  el.style.transform = `translate(${x}px,${y}px)`;
                el.setAttribute('data-x', x);
                el.setAttribute('data-y', y);
                pos.x = x;
                pos.y = y;
            },
        });
    }
</script>

<div id="draggable" bind:this={item} use:handleDraggable> 
    <p>{itemName} ({pos.x} / {pos.y}) Offset: {offset}</p>
</div>

修正说明 #

1. 自定义事件替代双向绑定：每个Item通过dispatch发送update事件，父组件接收后更新自身状态，彻底避免多组件共享对象引用的冲突。
2. $effect监听响应式变化：$effect会在pos或offset更新时自动执行，确保每次状态变化都能通知到父组件。
3. 独立组件状态：每个Item的pos和offset完全独立，动态创建更多组件时也不会互相干扰。

内容的提问来源于stack exchange，提问作者The_Lab