如何安装svelte_处理Card.svelte的活动

如何安装svelte

监听DOM事件 (Listening to DOM events)

In Svelte you can define a listener for a DOM event directly in the template, using the on:<event> syntax.

在Svelte中，您可以使用on:<event>语法直接在模板中为DOM事件定义侦听器。

For example, to listen to the click event, you will pass a function to the on:click attribute.

例如，要监听click事件，您需要将一个函数传递给on:click属性。

To listen to the onmousemove event, you’ll pass a function to the on:mousemove attribute.

要监听onmousemove事件，您需要将一个函数传递给on:mousemove属性。

Here’s an example with the handling function defined inline:

这是内联定义处理函数的示例：

<button on:click={() => {
  alert('clicked')
}}>Click me</button>

and here’s another example with the handling function defined in the script section of the component:

这是在组件的script部分中定义的处理函数的另一个示例：

<script>
const doSomething = () => {
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

I prefer inline when the code is not too verbose. If it’s just 2-3 lines, for example, otherwise I’d move that up in the script section.

当代码不太冗长时，我更喜欢内联。 例如，如果只有2-3行，那么我将在脚本部分中将其上移。

Svelte passes the event handler as the argument of the function, which is handy if you need to stop propagation or to reference something in the Event object:

Svelte将事件处理程序作为函数的参数传递，如果您需要停止传播或在Event对象中引用某些内容，这将非常方便：

<script>
const doSomething = event => {
  console.log(event)
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

Now, I mentioned “stop propagation”. That’s a very common thing to do, to stop form submit events for example. Svelte provides us modifiers, a way to apply it directly without manually doing it. stopPropagation and preventDefault are the 2 modifiers you’ll use the most, I think.

现在，我提到了“停止传播”。 这是很常见的事情，例如停止表单提交事件。 Svelte为我们提供了修饰符 ，这是一种无需手动执行即可直接应用它的方法。 我认为stopPropagation和preventDefault是您最常使用的2个修饰符。

You apply a modifier like this: <button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

您可以应用如下修饰符： <button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

There are other modifiers, which are more niche. capture enables capturing events instead of bubbling, once only fires the event once, self only fires the event if the target of the event is this object (removing it from the bubbling/capturing hierarchy).

还有其他修饰符，这些修饰符更合适。 capture启用捕获事件而不是冒泡 ， once仅触发一次事件，如果事件的目标是此对象，则self仅触发事件(将其从冒泡/捕获层次结构中删除)。

在组件中创建事件 (Creating your events in components)

What’s interesting is that we can create custom events in components, and use the same syntax of built-in DOM events.

有趣的是，我们可以在组件中创建自定义事件，并使用内置DOM事件的相同语法。

To do so, we must import the createEventDispatcher function from the svelte package and call it to get an event dispatcher:

为此，我们必须从svelte包中导入createEventDispatcher函数并调用它以获取事件分配器：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
</script>

Once we do so, we can call the dispatch() function, passing a string that identifies the event (which we’ll use for the on: syntax in other components that use this):

完成后，我们可以调用dispatch()函数，并传递一个用于标识事件的字符串(我们将在使用该事件的其他组件中使用on:语法)：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

  //when it's time to trigger the event
  dispatch('eventName')
</script>

Now other components can use ours using

现在其他组件可以使用我们的

<ComponentName on:eventName={event => {
  //do something
}} />

You can also pass an object to the event, passing a second parameter to dispatch():

您还可以将对象传递给事件，将第二个参数传递给dispatch() ：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  const value = 'something'

  //when it's time to trigger the event
  dispatch('eventName', value)

  //or

  dispatch('eventName', {
    someProperty: value
  })
</script>

the object passed by dispatch() is available on the event object as event.detail.

由dispatch()传递的对象在event对象上可以作为event.detail 。

翻译自: https://flaviocopes.com/svelte-events/

如何安装svelte