Svelte中如何访问运行时动态创建组件的属性？

在Svelte框架中，当组件于运行时动态创建时，如何访问该组件的属性？在模板中创建组件时，可直接使用bind:someProperty={someVariable}语法，但通过new Component()实例化组件时，不知如何实现属性访问。

附代码示例：

App.svelte #

<script>
    import { onMount } from "svelte";
    
    import Component2 from "./Component2.svelte";
    
    let taken;
    
    let container;
    
    onMount(() => {
        new Component2({
            target: container
        });
        
        // How do I access this new component's `someValue` property?
    });
    
</script>

<div bind:this={container}>
    
</div>

<Component2 bind:someValue={taken}></Component2>

Component2.svelte #

<script>
    export const someValue = Math.floor(Math.random() * 8999 + 1000);
</script>

<p>
    {someValue}
</p>

已知可通过构造函数传入props: {}对象为属性赋值，但需求是访问组件自身赋值的属性。此外，这种方式是否属于不良实践、不符合Svelte设计思路？是否应使用Store？若使用，该如何实现？

1. 访问动态创建组件的属性 #

通过new Component()实例化组件时，会返回一个组件实例对象，你可以直接通过这个实例访问组件导出的属性：

onMount(() => {
    const componentInstance = new Component2({
        target: container
    });
    
    // 直接读取组件导出的someValue属性
    console.log(componentInstance.someValue);
});

如果组件的属性是响应式的（用let声明的导出变量），还可以通过实例的$on方法监听属性变化：

// 假设Component2中是export let someValue = ...
componentInstance.$on('someValue', (event) => {
    console.log('someValue更新:', event.detail);
});

注意：如果组件用const导出属性（如示例中的写法），属性不具备响应式，只能一次性读取。

2. 是否属于不良实践？ #

直接操作组件实例不完全符合Svelte的声明式设计思路。Svelte更推荐通过模板声明、props传递、状态管理工具处理组件通信，这样代码更易维护，也更贴合框架的设计哲学。

简单场景下偶尔使用实例访问属性没问题，但如果是复杂的跨组件状态共享，更建议用Store或props反向传递的方式。

3. 使用Store实现状态共享 #

如果需要在多个组件（包括动态创建的组件）间共享状态，Svelte的Store是更合适的方案，具体步骤如下：

步骤1：创建Store #

新建stores.js文件：

import { writable } from 'svelte/store';

// 创建可写Store，初始值设为null
export const someValueStore = writable(null);

步骤2：在Component2中更新Store #

修改Component2.svelte，将生成的someValue存入Store：

<script>
    import { someValueStore } from './stores.js';
    
    const someValue = Math.floor(Math.random() * 8999 + 1000);
    // 把值写入Store
    someValueStore.set(someValue);
</script>

<p>
    {someValue}
</p>

步骤3：在App.svelte中订阅Store #

不管是模板声明的组件还是动态创建的组件，都能通过订阅Store获取状态：

<script>
    import { onMount, onDestroy } from "svelte";
    import { someValueStore } from './stores.js';
    
    import Component2 from "./Component2.svelte";
    
    let taken;
    let container;
    let dynamicSomeValue;
    
    // 订阅Store，获取动态组件的状态
    const unsubscribe = someValueStore.subscribe(value => {
        if (value !== null) {
            dynamicSomeValue = value;
        }
    });
    
    onMount(() => {
        new Component2({
            target: container
        });
    });
    
    // 组件销毁时取消订阅，避免内存泄漏
    onDestroy(() => {
        unsubscribe();
    });
    
</script>

<div bind:this={container}>
    
</div>

<Component2 bind:someValue={taken}></Component2>
<p>动态组件的someValue: {dynamicSomeValue}</p>

这种方式无需直接操作组件实例，完全符合Svelte的声明式风格，更适合复杂的状态共享场景。

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