title: Passing data between sibling components in Svelte
body: <p>How to pass data (ex: Navbar Title) to a component used in the parent element?</p>
  <pre><code>&lt;!-- _layout.svelte --&gt;
  &lt;script&gt;
    import Nav from &quot;../components/Nav.svelte&quot;;
    let navTitle = &quot;MyApp&quot;;
  &lt;/script&gt;
  
  &lt;Nav {navTitle}/&gt;
  &lt;slot /&gt;
  </code></pre>
  <pre><code>&lt;!-- Nav.svelte --&gt;
  &lt;script&gt;
    export let navTitle = &quot;&quot;;
  &lt;/script&gt;
  &lt;h1&gt;{navTitle}&lt;/h1&gt;
  </code></pre>
  <pre><code>&lt;!-- Login.svelte --&gt;
  How to pass navTitle value from here to Nav.svelte?
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;!-- Article.svelte --&gt;
  </code></pre>
  <pre><code>&lt;!-- User.svelte --&gt;
  navTitle is '&lt;a href=&quot;/user&quot;&gt;My Account &lt;/a&gt;'
  </code></pre>
  <pre><code>&lt;!-- Comment.svelte --&gt;
  </code></pre>