Question

我是 Svelte 的新手，很可能我在这里遗漏了一些东西。

我正在使用 sveltestrap 和 svelte-spa-router。当我尝试创建 <Button>（来自 sveltestrap）并使用 link 操作（来自 svelte-spa-router）时：

<script>
  import { Button } from 'sveltestrap';
  import {link} from 'svelte-spa-router';
  let myLink = '/foo/bar';
 </script>
<Button use:link={myLink}>
  Click here
</Button>

我收到以下错误：

[!] (plugin svelte) ValidationError: Actions can only be applied to DOM elements, not components

我的期望是以某种方式 (??) <Button> 会“向下传递”use:link 到子 html 节点。

是否有针对此类情况的最佳做法？

Answer 1

由于您使用的是按钮组件，因此您可能希望更改代码以在 push 事件中使用 link 而不是 on:click。

<script>
  import { Button } from 'sveltestrap';
  import { push } from 'svelte-spa-router';
  let myLink = '/foo/bar';
</script>

<Button on:click={() => push(myLink)}>
  Click here
</Button>

Svelte - 将 use:action 传递给子组件

1 个答案: