Svelte 脚本错误：切换元素单击事件不会触发

Question

我是 Svelte 的新手，有些事情我认为应该很容易做，但它们给我带来了麻烦。在一个小型 Svelte 应用程序中，我有这个 HTML:

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

我需要在跨度元素中显示“开”或“关”，具体取决于开关的“状态”。为此，我有：

import Switch from './Switch.svelte';
let stat = 'off';
let status = false;

function toggle () {
 status = !status;
     stat = status ? "on" : "off";
}

参见 REPL here。

由于我无法理解的原因，即使控制台没有错误，跨度始终显示“关闭”。为什么？

Answer 1

你把事情搞得太复杂了。您可以轻松绑定到底层组件的检查值：

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

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

之前，您尝试监听 click 事件，而您的 Switch 组件没有，这就是它不起作用的原因。但由于它是一个复选框，所以它已选中属性。查找更多信息 here。

Answer 2

另一个版本，HTML 中没有任何逻辑（并且所有内容都在 <script> 标签内）：

<script>
    import Switch from '../ui/Switch.svelte';
    let stat = 'off';
    let status = false;
    $:stat = status ? "On" : "Off"; 
</script>

<div>
    <Switch bind:checked={status} /> <span>{stat}</span>
</div>

Answer 3

另一个版本，使用子组件的事件分发器向父组件发出点击事件：

//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>

...

//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>

Svelte 脚本错误：切换元素单击事件不会触发

Svelte script bug: Switch element click event does not fire

javascript

svelte