在 Svelte 中的兄弟组件之间传递数据答案

【问题标题】：Passing data between sibling components in Svelte在 Svelte 中的兄弟组件之间传递数据
【发布时间】：2020-12-18 13:15:50
【问题描述】：

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

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

【问题讨论】：

标签： svelte svelte-component svelte-store routify

【解决方案1】：

跨组件共享数据的最简单方法是使用 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('')

【讨论】：

谢谢你的回答，@stephane。我更新了问题以阐明可扩展性和默认值问题。你会更新你的建议吗？例如，Routify 允许通过简单地使用 $: metatags.title = "Log in"; 在页面上设置 metatag.title
您可以将 navTitle 导入应用中您希望能够设置的任何位置，然后将其设置为类似于您在 Routify 中的设置方式
$navTitle 似乎正在转义 HTML，只显示文本。有没有办法将 HTML 传递给它？
Svelte 自动转义文本，如果你想覆盖它，你可以使用 {@html $navTitle} 但是这样做时你必须确保这样做总是安全的（输出未转义的 html 可以是XSS)

【解决方案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）
针对 svelte 的多个 Redux 适配

【讨论】：

您也可以为此使用双向绑定，但应避免使用（您很快就会弄乱数据流）。在 App.svelte <Login bind:navTitle/> 和 Login.svelte export let navTitle 和 <p on:click={()=>navTitle=("Logged in")}> 中，关键字是 bind:，这使得双向绑定到 navTitle 变量，即。当变量在一个地方发生变化时，它也会改变其他地方。