Svelte中on：click中的`：`如何工作？

Question

我正在尝试Svelte并遵循官方教程。在https://svelte.dev/tutorial/reactive-assignments上，指示我使用以下代码行：

<button on:click={handleClick}>

结肠的目的是什么？为什么不简单<button onclick=...呢？

我在元素指令上找到了Svelte API文档，该文档提供了Svelte内的用法示例，但我仍然不了解这是如何有效的JS语法，或者如何转换为此类。我不了解冒号的工作原理（与了解其用法不同）。

我可以理解，这是为所有DOM事件属性实现单个指令的一种方法，但是它的实际功能对我而言并不那么透明。

Answer 1

其他人已经解释了将其编译为JavaScript的要点，因此我将介绍这一部分：

为什么不简单<button onclick=...呢？

该onclick属性是现有的HTML属性（您不应使用）。语义非常不同-发生点击时，字符串值被评估为JavaScript。这是一种不好的做法，因为您调用的任何函数都必须位于全局范围内。

on:click是一种将按钮的click事件链接到本地定义的功能的Sveltism 。它:是一种通用的语法，上面写着“这是指令而不是属性 ”，其中“指令”可以表示事件处理程序（on:...），绑定（bind:...），转换（in:.../ out:.../ transition:...）等。

Answer 2

首先要了解的是，Svelte组件中的代码实际上不是发送到浏览器的结果JavaScript，因此：

我仍然不明白这是如何有效的JS语法

它不是。SvelteJS的编译器会将其“编译”为有效的JavaScript。

我没有漫游源代码，但是在这种情况下，我假定冒号用于表示on事件本身（click）中的事件处理程序绑定指令（）。

对于编译的实际演示：您可以访问REPL并选择“ Js输出”选项卡以查看编译的JavaScript代码。