Svelte에서 형제 구성 요소 간에 데이터 전달

Svelte에서 형제 구성 요소 간에 데이터 전달

상위 요소에 사용된 구성 요소에 데이터(예: Navbar Title)를 전달하는 방법은 무엇입니까?

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

---

함수를 구성 요소에 전달할 수 있습니다.

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

그리고 에서 전달된 함수를 호출한다.

<script>
export let onlogin
</script>

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

다음은 REPL입니다.

다음과 같은 다른 (더 나은) 방법이 있습니다.

• 사용자 지정 이벤트:
• 상점들
• 문맥(, )
• svelte에 대한 다중 중복 적응

---

구성 요소 간에 데이터를 공유하는 가장 쉬운 방법은 에 설명된 대로 저장소를 사용하는 것입니다.

그것을 위한 당신의 설정은

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

---

형제 요소 간에 통신해야 하지만 공유 데이터가 각 형제 구성 요소 그룹에 고유해야 하는 경우 체크아웃합니다.