Question

类似于How to bind variable declared with Svelte let directive?，但该问题是由Svelte错误引起的，该错误现已明显修复-这发生在最新的Svelte 3.23.0上。

我正在使用Svelte和yrv router。我希望能够访问组件内部的router变量，尤其是slug参数。

<Router>

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

</Router>

当我构建它时，斯维尔特抱怨道：

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

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

Answer 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

Answer 2

您可以将 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>

Svelte / yrv路由器：如何访问组件中的路由器参数？

2 个答案: