如何将反应性道具从SvelteKit __layout文件传递到托管在其中一个插槽中的页面？
如何将反应性道具从SvelteKit __layout文件传递到托管在其中一个插槽中的页面？
提问于 2022-03-18 06:39:19
下面的示例有两个文件: index.svelte托管在__layout.svelte中提供的插槽中。单击该按钮时，应更改宿主页中框的颜色。如果index.svelte是子组件，下面的代码可以正常工作，但如果index.svelte是托管在插槽中的页面，则不能工作。我确信这是因为道具与宿主页面的工作方式不同。
我尝试过使用setContext/getContext和一个可写存储来传递信息，但是我还没有找到一种方法来实现这种反应，从而使方框颜色更改立即生效--我尝试过的一切都需要重新加载index.svelte才能应用颜色更改。
是否有一种即时更新宿主页面上的元素的反应方式？
__layout.svelte:
<script>
let color = "green";
function onClick(e) {
color = "red";
}
</script>
<button on:click={onClick}>Red</button>
<slot color={color}></slot>index.svelte:
<script>
export let color = "blue";
</script>
<div class="box" style="background-color:{color}"></div>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
}
</style>上面的代码可以在这里找到：
回答 1
Stack Overflow用户
发布于 2022-03-18 07:04:16
您可以在load函数中创建一个存储，并将其在一边传递给布局，另一面传递到stuff中的位置。
<!-- __layout.svelte -->
<script context="module">
import { writable } from 'svelte/store';
export async function load() {
const color = writable('green');
return {
props: {
color
},
stuff: {
color
}
};
}
</script>
<script>
export let color;
function onClick(e) {
$color = 'red';
}
</script>
<button on:click={onClick}>Red</button>
<slot />然后，在页面本身的load函数中，从stuff抓取这个商店并将其传递给道具。
<script context="module">
export async function load({ stuff }) {
return {
props: {
color: stuff.color
}
};
}
</script>
<script>
export let color;
</script>
<div class="box" style="background-color:{$color}" />
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
}
</style>现在你有反应了！
关于共享状态和全局存储的说明
正如上面所描述的，如果您有一个在load函数之外的“生命”存储--这被认为是共享状态，并且在所有用户中都是常见的，那么请小心处理这个问题。
<script context="module">
import myStore from './myStore.js';
export async function load() {
myStore.set(something_sensitive); everyone has access to this now!!
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71523283
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号