\ Svelte 事件是我们向 Svelte 中的组件添加交互性的方式。 Svelte 事件的一个常见问题是向其中调用的函数添加参数。
\ 例如,假设我们有一个基本计数器,只要用户点击它,它就会增加:
\
<script> // we write export let to say that this is a property // that means we can change it later! let x = 0; const addToCounter = function() { ++x; } </script> <button id="counter" on:click={addToCounter}>{x}</button>
\ 这很好用,但是假设我们要更改它,以便在每次单击时将计数器增加一定数量。我们可能会尝试将代码更改为以下内容:
\
<script> // we write export let to say that this is a property // that means we can change it later! let x = 0; const addToCounter = function(amount) { x += amount; } </script> <button id="counter" on:click={addToCounter(5)}>{x}</button>
\但这不起作用– 相反,我们需要更改我们的事件以包含一个函数。
\ 要将参数添加到我们的addToCounter
函数,我们必须这样做:
\
<button id="counter" on:click={() => addToCounter(5)}>{x}</button>
\ 这里,我们调用一个函数,它返回addToCounter
产生的值。这也适用于事件,因此如果您想将事件或e
对象传递给您的函数,您可以执行以下操作:
\
<button id="counter" on:click={(e) => addToCounter(e)}>{x}</button>
也在这里发布
原文: https://hackernoon.com/learn-how-to-pass-arguments-to-events-in-svelte-in-just-4-steps?source=rss