Javascript 苗条脚本错误：开关元素单击事件未触发

我是苗条的新手，有些事情我认为应该很容易做，但它们给我带来了麻烦。在一个小巧的应用程序中，我有以下HTML：

<div class="mt-5 mb-6">
   <Switch on:click={toggle} /> <span>{stat}</span>
</div>

见答复

---

出于一个我无法理解的原因，即使控制台中没有错误，span总是会显示出来。为什么？你把事情弄得太复杂了。您可以轻松绑定到基础组件的选中值：

<script>
    import Switch from './Switch.svelte';
    let status;
    
</script>

<div>
    <Switch bind:checked={status} /> <span>{status ? "on" : "off"}</span>
</div>

---

以前，您尝试侦听一个单击事件，而您的交换机组件没有该事件，这就是它无法工作的原因。但由于它是一个复选框，因此它具有checked属性。查找更多信息。

你把事情弄得太复杂了。您可以轻松绑定到基础组件的选中值：

<script>
    import Switch from './Switch.svelte';
    let status;
    
</script>

<div>
    <Switch bind:checked={status} /> <span>{status ? "on" : "off"}</span>
</div>

---

以前，您尝试侦听一个单击事件，而您的交换机组件没有该事件，这就是它无法工作的原因。但由于它是一个复选框，因此它具有checked属性。查找更多信息。

另一个版本，HTML中没有逻辑，所有内容都在标记中：

---

另一个版本，HTML中没有逻辑，所有内容都在标记中：

---

另一个版本，使用子组件中的事件调度器将单击事件发送到父组件：

//Switch.svelte
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
</script>

<label class="switch">
  <input type="checkbox" on:click="{() => dispatch('toggle')}"/>
  <span class="slider" />
</label>

---

另一个版本，使用子组件中的事件调度器将单击事件发送到父组件：

//Switch.svelte
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
</script>

<label class="switch">
  <input type="checkbox" on:click="{() => dispatch('toggle')}"/>
  <span class="slider" />
</label>

---

我想保持我的HTML尽可能干净。我应该用什么替换click事件？您可以用bind:checked={status}替换它。请在这里登记回复：谢谢！看一看。嘿，链接到这个页面。我还从另一个答案中看到，我不理解关于tidy html的第二个问题。我会像@RazvanZamfirI那样尽可能保持HTML的干净。我应该用什么替换click事件？您可以用bind:checked={status}替换它。请在这里登记回复：谢谢！看一看。嘿，链接到这个页面。我还从另一个答案中看到，我不理解关于tidy html的第二个问题。我会像@RazvanZamfir那样做

//App.svelte
<script>
    import Switch from './Switch.svelte';
    let stat = 'off';
    let status = false;
    
    function toggle () {
     status = !status;
         stat = status ? "on" : "off";
  }
</script>

<div class="mt-5 mb-6">
    <Switch on:toggle={toggle} /> <span>{stat}</span>
</div>