面试题：Svelte组件中如何绑定原生DOM事件

Question

在Svelte组件中，假设有一个按钮元素，如何绑定原生的点击事件，并在点击时执行一个函数，例如更新组件中的某个变量值？请给出代码示例。

Answer 1

在Svelte组件中，可以通过on:click指令来绑定原生的点击事件，并执行相应函数。以下是代码示例：

<script>
    let count = 0;

    function increment() {
        count++;
    }
</script>

<button on:click={increment}>
    Click me! {count}
</button>

在上述代码中：

1. 首先在<script>标签内声明了一个变量count并初始化为0，同时定义了一个函数increment，用于增加count的值。
2. 然后在<button>元素上使用on:click指令绑定了increment函数，当按钮被点击时，increment函数会被调用，从而更新count的值，并在按钮文本中显示更新后的count值。