在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两个属性了。