在 Svelte 中向下传递道具

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 的组件，我在其中将 link 传递给 post 视图页面。

博客组件：

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

Post预告片组件：

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

尽管屏幕上确实出现了带有正确信息的预告片。

当我点击 post，即 Post 组件时，我的数据未定义。

我将 export let post; 放在我的每个组件的脚本标记中。

我应该为我的数据使用 "store" 吗？目前，我正在 BlogComponent 中获取我的数据并将其传递给下行。这似乎是不正确的。非常感谢任何帮助。

查看此处以获得更完整的示例：https://codesandbox.io/s/romantic-cannon-ri8lo

Answer 1

简单示例：

父组件

<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

Answer 2

使用 svelte-routing，您不会从 <Link> 组件传递道具，而是隐式地从 <Route> 组件传递它们。你在哪里有这个...

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

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

的那部分相匹配的道具

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.

在 Svelte 中向下传递道具

Passing props down in Svelte

javascript

svelte

google-cloud-firestore