在 Svelte 中传递道具

我正在尝试使用 Svelte、Svelte Routing 和 Firestore 实现一个相当标准的博客应用程序，但我认为我误解了 props 在组件之间传递方式的基本部分。

我的初始代码基于 Fireship.io 上的优秀教程 - 该教程按照教程工作：https://fireship.io/lessons/svelte-v3-overview-firebase/ https://fireship.io/lessons/svelte-v3-overview-firebase/

从那里我添加了 Svelte Routing -https://github.com/EmilTholin/svelte-routing https://github.com/EmilTholin/svelte-routing- 我正在尝试添加一条查看路线。

App.svelte的相关部分：

<Router url="{url}">
    <Navbar user="{user}" />

    <div>
        <Route path="posts/:id" component="{Post}" />
        <Route path="posts/add" component="{PostForm}" />
        <Route path="posts" component="{Blog}" />
        <Route path="/" component="{Home}" />
    </div>

</Router>

在我的博客组件中，我使用一个名为 PostTeaser 的组件，在其中传递一个到帖子视图页面的链接。

博客组件：

<div class="posts">
    {#each posts as post}
      <PostTeaser post="{post}" />
    {/each}
</div>

PostTeaser 组件：

<div class="post-teaser">
   <h2 class="title is-3"><Link to="posts/{ post.id }" {post}>{ post.title }</Link></h2>
   <div class="post-teaser-content">{ post.content }</div>
</div>

我在浏览器中收到警告：<Link> was created with unknown prop 'post'

尽管预告片确实出现在屏幕上并包含正确的信息。

当我点击帖子（即帖子组件）时，我的数据未定义。

我正在放置export let post;在我每个组件的脚本标签中。

我应该使用“存储”来存储我的数据吗？目前，我正在 BlogComponent 中获取数据并将其沿线传递。这似乎是不正确的。任何帮助不胜感激。

请参阅此处查看更完整的示例：https://codesandbox.io/s/romantic-cannon-ri8lo https://codesandbox.io/s/romantic-cannon-ri8lo

使用svelte-routing，你不需要从<Link>组件，您可以从<Route>隐式组件。你哪里有这个...

<Route path="posts/:id" component="{Post}" />

...你告诉路由器如果 URL 与模式匹配/posts/:id，它应该渲染Post组件，传递给它一个id与 URL 的该部分匹配的 prop。

The Post组件负责根据该数据获取其数据。所以在这种情况下，您可以移动posts数组到一个单独的模块中，并更改Post.svelte因此：

<script>
  import posts from "./posts.js";

  export let id;
  $: post = posts.find(p => p.id == id);
</script>

<div class="post">
  <h1>{ post.title }</h1>
  <div class="post-content">{ post.content }</div>
</div>

（请注意，props 是字符串化的，因为它们源自href，所以我们需要一个==比较而不是===.)

这是一个工作叉子。 https://codesandbox.io/s/clever-bird-26xkx