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

Question

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

我正在使用 sveltestrap and 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> 会以某种方式 (??) 'pass down' 将 use:link 传递给子 html 节点。

是否有针对此类情况的最佳实践？

Answer 1

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

<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 传递给子组件

Svelte - pass use:action to component child

svelte-component

svelte-3