在Svelte中向下传递props

Question

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

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

然后我添加了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>

文章摘要组件：

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

创建时出现未知属性 'post'

虽然 Teaser 会以正确的信息显示在屏幕上。

当我点击进入文章，即 Post 组件时，我的数据为 undefined。

我在每个组件的 script 标签中放置了 export let post;。

我应该使用“存储”来处理我的数据吗？目前，我是在 BlogComponent 中获取数据并将其向下传递。看起来这是不正确的。非常感谢任何帮助。

更完整的示例请参见：https://codesandbox.io/s/romantic-cannon-ri8lo

- Martin Petts

Answer 1

使用svelte-routing，你不需要从<Link>组件传递props，而是隐式地从<Route>组件传递。当你有以下情况...

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

...你正在告诉路由器，如果URL匹配模式/posts/:id，它应该呈现Post组件，并传递一个与URL的一部分匹配的id属性。

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。

- Rich Harris

Answer 2

简单示例：

父组件

<script>
  import PostTeaser from "./PostTeaser.svelte";
  let post = {
    first: 'First prop',
    second: 'Second prop'
  };
</script>

<PostTeaser {...post} />

子组件

<script>
    export let first;
    export let second;
</script>

First prop: {first} <br>
Second prop: {second}

代码如下：https://codesandbox.io/s/spread-props-using-svelte-y7xou

- Umbro

---

谢谢，但对我似乎不起作用。请看这里：https://codesandbox.io/s/romantic-cannon-ri8lo - Martin Petts

你运行了服务器吗？ - Umbro