gpt4 book ai didi

svelte - 在 Svelte 中的兄弟组件之间传递数据

转载 作者:行者123 更新时间:2023-12-05 02:05:19 28 4
gpt4 key购买 nike

如何将数据(例如:导航栏标题)传递给父元素中使用的组件?

<!-- _layout.svelte -->
<script>
import Nav from "../components/Nav.svelte";
let navTitle = "MyApp";
</script>

<Nav {navTitle}/>
<slot />
<!-- Nav.svelte -->
<script>
export let navTitle = "";
</script>
<h1>{navTitle}</h1>
<!-- Login.svelte -->
How to pass navTitle value from here to Nav.svelte?

澄清一下,这需要是可扩展的,并使用 Routify 为 SPA 的所有路由处理页面加载/转换,最好提供默认值并能够具有 HTML 值:

<!-- Article.svelte -->
<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'
<!-- Comment.svelte -->

最佳答案

跨组件共享数据的最简单方法是使用商店,如 docs 中所述。

你的设置是

<!-- Nav.svelte -->
<script>
import { navTitle } from './store.js'
</script>
<h1>{$navTitle}</h1>
<!-- Login.svelte -->
<script>
import { navTitle } from './store.js'

navTitle.set('...')
</script>
<!-- store.js -->
import { writable } from 'svelte/store'

export const navTitle = writable('')

关于svelte - 在 Svelte 中的兄弟组件之间传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63653518/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com