0

类似于如何绑定使用 Svelte let 指令声明的变量？，但该问题是由一个 Svelte 错误引起的，该错误现在显然已修复 - 这发生在最新可用的 Svelte 3.23.0 上。

我正在使用 Svelte 和yrv 路由器。我希望能够访问router组件内的变量，特别是slug参数。

<Router>

  <Route exact path="/:slug" let:router>
    <WorkDetail {works} bind:slug={router.params.slug} />
    Hey {router.params.slug}!
  </Route>

</Router>

当我构建它时，Svelte 抱怨说：

ValidationError：无法绑定到使用 let: 指令声明的变量

如何访问router组件中的参数？

4

2 回答 2

1

你不必在bind:这里，没关系

<WorkDetail {works} slug={router.params.slug} />

如果你想router在外部组件上使用，那么你可以立即调用一个方法来设置它，如下所示：

<script>

// ...

let router;
function setRouter(r) {
  router = r;
  return '';  // the return value of this method call will be rendered, prints undefined if we don't return someting
}

</script>

<Router>

  <Route exact path="/:slug" let:router>
    {setRouter(router)}
    <WorkDetail {works} slug={router.params.slug} />
    Hey {router.params.slug}!
  </Route>

</Router>

这是一个简化的 REPL： https ://svelte.dev/repl/a5ab1904ecdd47b39c3575125f95d9d6?version=3.23.0

于 2020-06-07T10:56:10.683 回答
1

您可以将 PROPS 用于子组件

例子

App.svelte

<script>
import {Router,Route,Link} from 'yrv'
import Food from './Food.svelte'
</script>


<Router>
 <Route path="/about/:name">
<About name={router.params.name}/>
</Route>
</Router>

在子组件中

<script>
export let name;
</srcipt>
<p>HERE params : {name}</p>
于 2021-04-03T02:31:41.993 回答