[英]Passing data between sibling components in Svelte
How to pass data (ex: Navbar Title) to a component used in the parent element?如何将数据(例如:导航栏标题)传递给父元素中使用的组件?
<!-- _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?
To clarify, this needs to be scalable and to work on page load/transition for all routes of an SPA using Routify, preferably providing a default value and be able to have HTML value:澄清一下,这需要具有可扩展性,并使用 Routify 处理 SPA 的所有路由的页面加载/转换,最好提供默认值并能够具有 HTML 值:
<!-- Article.svelte -->
<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'
<!-- Comment.svelte -->
The easiest way to share data across components is to use stores as described in the docs跨组件共享数据的最简单方法是使用文档中描述的存储
Your setup for that would be你的设置是
<!-- 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('')
You can pass a function to Login.svelte
component您可以将函数传递给
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}/>
And call the passed function in the Login.svelte
并调用
Login.svelte
传递的函数
<script>
export let onlogin
</script>
<p on:click={()=>onlogin("Logged in")}>
click me to login
</p>
Here is the REPL: https://svelte.dev/repl/f1c8777df93f414ab26734013f2c4789?version=3这是 REPL: https ://svelte.dev/repl/f1c8777df93f414ab26734013f2c4789 ? version =3
There are other (better) ways to do this like:还有其他(更好的)方法可以做到这一点:
createEventDispatcher
createEventDispatcher
自定义事件setContext
, getContext
)setContext
, getContext
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.