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>

在我的Blog组件中，我使用了一个名为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

Answer 1

使用苗条路由时，您不会从<Link>组件传递道具，而是从<Route>组件隐式传递道具。哪里有这个...

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

...您告诉路由器，如果URL与模式/posts/:id相匹配，它将呈现Post组件，并向其传递与该部分匹配的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>

（请注意，道具是字符串化的，因为它们是从href派生的，因此我们需要进行==的比较，而不是===。）

Here's a working fork.

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

在Svelte传递道具

2 个答案: