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

【问题标题】：Svelte - pass use:action to component childSvelte - 将 use:action 传递给子组件
【发布时间】：2021-04-15 08:42:09
【问题描述】：

我是 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 节点。

对于这种情况有最佳实践吗？

【问题讨论】：

标签： svelte-3 svelte-component

【解决方案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>

【讨论】：