Svelte 5绑定值实现变复杂，迁移后绑定失效求优化方案

你可以通过以下几种方式简化代码，解决绑定失效的问题：

方案1：用$derived替代手动订阅与状态声明 #

不需要额外创建$state变量和手动订阅page，$derived会自动跟踪data.news的响应式变化：

interface Props { 
  data: PageData;
}
let { data }: Props = $props();
// 自动同步data.news的变化
let news = $derived(data.news);

<Player bind:data={news} />
<Actions bind:data={news} />

方案2：直接从page store派生数据（若data来自路由） #

如果你的data是从SvelteKit的page store获取的，可以直接在组件内派生响应式数据，省去props传递步骤：

import { page } from '$app/stores';
// 从page store派生响应式data
let data = $derived($page.data as PageData);

<Player bind:data={data.news} />
<Actions bind:data={data.news} />

关键说明 #

Svelte 5中$props()返回的props本身就是响应式的，但如果data是一个会被整体替换的对象（比如路由更新时生成新的data实例），直接绑定data.news可能无法触发子组件的响应式更新。用$derived可以自动跟踪data的变化，确保news始终指向最新的data.news，绑定自然恢复正常。

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