在Svelte中在兄弟级组件之间传递数据

Question

如何将数据(例如: Navbar标题)传递给父元素中使用的组件？

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

Answer 2

可以将函数传递给Login.svelte组件。

<script>
  import Nav from "./Nav.svelte";
  import Login from "./Login.svelte"
  let navTitle = "MyApp";
  const onlogin= (v)=>navTitle = v
</script>
<Login {onlogin}/>
<Nav {navTitle}/>

并调用Login.svelte中传递的函数。

<script>
export let onlogin
</script>

<p on:click={()=>onlogin("Logged in")}>
  click me to login
</p>

以下是REPL：https://svelte.dev/repl/f1c8777df93f414ab26734013f2c4789?version=3

还有其他(更好的)方法可以这样做：

• 使用createEventDispatcher定制事件
• 商店
• 上下文(setContext，getContext)
• 多个Redux-适用于svelte

Answer 3

如果您需要在同级元素之间进行通信，请查看这个例子，但是您需要共享数据以特定于每一组同级组件。