在 Svelte 中的兄弟组件之间传递数据
Passing data between sibling components in Svelte
如何将数据(例如:导航栏标题)传递到 parent 元素中使用的组件?
<!-- _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?
需要澄清的是,这需要可扩展并在页面 load/transition 上为使用 Routify 的 SPA 的所有路由工作,最好提供默认值并能够具有 HTML 值:
<!-- Article.svelte -->
<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'
<!-- Comment.svelte -->
您可以将函数传递给 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-adaptations 苗条
跨组件共享数据的最简单方法是使用 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('')
如何将数据(例如:导航栏标题)传递到 parent 元素中使用的组件?
<!-- _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?
需要澄清的是,这需要可扩展并在页面 load/transition 上为使用 Routify 的 SPA 的所有路由工作,最好提供默认值并能够具有 HTML 值:
<!-- Article.svelte -->
<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'
<!-- Comment.svelte -->
您可以将函数传递给 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-adaptations 苗条
跨组件共享数据的最简单方法是使用 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('')