svelte初始化时load函数返回props和stuff区别

本文链接：https://blog.csdn.net/ramblerviper/article/details/125078146

本文详细解析Svelte框架中module脚本块的load函数返回的props和stuff对象。props对象用于传递属性到对应的页面组件，可以直接在组件内部使用。而stuff对象则允许在父组件和其所有子组件间共享数据，子组件可以添加新的数据到stuff，供下级组件使用。通过这两个机制，Svelte实现了组件间的高效数据流动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在svelte的module中，我们可以通过load函数返回props和stuff两个重要的对象，这两个对象分别有不同的功能作用，没弄明白很容易迷糊，本文就着重讲一下这两个对象的作用。

props

如果load函数返回props对象，那么props对象会被传递到其对应渲染的页面中。

<script context="module" lang="ts">
    
    export async function load({session,url}){
        const property1 = 'aaa';
        const property2 = 'bbb';

        return {
            props:{
                property1: property1,
                property2: property2,
            }
        }
    }

</script>

<script lang="ts">

    let property1;
    let property2;

</script>

在load函数中返回的props对象属性，只需要在页面直接定义就可以获取到。上面的例子中，在下面直接定义property1 和property2 就可以直接使用 module里面定义的值了。

stuff

stuff主要是为页面传递数据设计的，在父组件中定义了stuff，在其所有的子组件的load函数中都可以获取到。如果子组件向stuff中新增了数据，那么在子组件的子组件中可以获取到合并之后的stuff。

// 父组件
<script context="module" lang="ts">
    
    export async function load({session,url}){
        const property1 = 'aaa';
        const property2 = 'bbb';

        return {
            props:{
                property1: property1
            },
            stuff:{
                property2: property2
            }
        }
    }

</script>

<script lang="ts">

    let property1;

</script>


// 子组件
<script context="module" lang="ts">
    
    export async function load({stuff,url}){
        const property1 = 'aaa';

        console.log(stuff.property1);

        return {
            props:{
                property1: property1
            },
            stuff: {
                property1: property1 //添加属性，此时stuff里面有property1 和 property2两个属性
            }
        }
    }

</script>

父组件中load函数返回中stuff设置了属性property1 ，子组件中load方法传入stuff参数，在方法内部可以通过stuff.property1的方式来获取stuff内容。同样，在子组件返回中可以为stuff添加属性，这样它的下个层级就可以获取到property1和property2两个属性了。