如何将数据(例如:导航栏标题)传递给父元素中使用的组件?
<!-- _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 -->
答案 0 :(得分:0)
您可以将函数传递给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
)答案 1 :(得分:0)
最简单的跨组件共享数据的方法是使用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('')