在 Svelte 中的同级组件之间传递数据

Question

如何将数据（例如：导航栏标题）传递到父元素中使用的组件？

<!-- _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 -->

Answer 1

跨组件共享数据的最简单方法是使用文档中描述的存储

你的设置是

<!-- 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('')