Svelte 5 Runes模式下，如何从动态渲染组件获取属性？

解决方案 #

在Svelte 5 Runes模式下，组件实例的props不再像Svelte 4那样直接挂载在实例顶层，需要通过$props属性访问，同时要利用响应式API跟踪props变化。以下是具体修改方案：

1. 更新TabItem.svelte

提供两种实现方式，按需选择：

方式一：使用$subscribe（适合需要额外处理逻辑的场景）

<script>
    import { $effect, $state } from "svelte";

    let {
        instance = null,
        active = false,
        onSelected = () => {},
        onClose = () => {}
    } = $props();

    let title = $state("None");
    let icon = $state("fa fa-question");

    $effect(() => {
        if (!instance) return;
        
        // 订阅组件props变化，Dashboard的title/icon更新时自动同步
        const unsubscribe = instance.$subscribe(($props) => {
            title = $props.title ?? "None";
            icon = $props.icon ?? "fa fa-question";
        });

        // 组件销毁时取消订阅，避免内存泄漏
        return unsubscribe;
    }, [instance]);
</script>

<button class="tab-item" class:active={active} onclick={onSelected} role="tab" aria-selected={active}>
    <i class={icon}></i>
    <span>{title}</span>
    <div class="close" onclick={onClose} title="Close tab" tabindex="0" role="button" aria-label="Close tab">
        x
    </div>
</button>

方式二：使用$derived（简洁无额外逻辑场景）
直接通过响应式推导自动跟踪props变化，代码更简洁：

<script>
    import { $derived } from "svelte";

    let { 
        instance = null, 
        active = false, 
        onSelected = () => {}, 
        onClose = () => {} 
    } = $props();

    // 自动监听instance.$props的变化，实时同步title和icon
    const title = $derived(instance?.$props.title ?? "None");
    const icon = $derived(instance?.$props.icon ?? "fa fa-question");
</script>

<button class="tab-item" class:active={active} onclick={onSelected} role="tab" aria-selected={active}>
    <i class={icon}></i>
    <span>{title}</span>
    <div class="close" onclick={onClose} title="Close tab" tabindex="0" role="button" aria-label="Close tab">
        x
    </div>
</button>

2. 其他组件无需修改

• Dashboard.svelte保持原有逻辑，继续自行管理title和icon属性即可
• TabsContainer.svelte的实例绑定逻辑正确，无需调整

问题根源说明 #

Svelte 4中组件实例的props直接暴露在实例顶层，所以instance.title可以直接访问；但Svelte 5 Runes模式下，props被封装在$props对象中，且需要通过$subscribe或$derived这类响应式API来跟踪变化，仅用$effect监听instance本身无法触发props更新的回调。

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