Javascript 侦听来自Svelte组件的已调度事件

我正在寻找一种方法，从JavaScript中的另一个组件（而不是从

on:

语法）中的一个小组件中侦听分派的事件

是我试图在REPL上实现的代码

---

当点击关闭0按钮时，预期的行为将在控制台中显示0，对于其他行为，依此类推。

我对svelte的编译代码进行了一些挖掘，找到了一个监听svelte已处理事件的解决方案，但这并不完美：）

调用

onClose

时，您可以（也应该）调度自己的自定义事件，但解决方案如下：

关于嵌套的.svelte

<script context="module">
    let counter = 0
</script>

<script>
    import { createEventDispatcher, onMount } from 'svelte';
    // add this
    import { get_current_component } from 'svelte/internal'; 
    let _this;
    const id = counter++
  const dispatch = createEventDispatcher()
    /*********
     and add this reactive statement
    **********/
    $: {
        if (_this){
            _this.parentNode.hosts = (_this.parentNode.hosts || []);
            _this.parentNode.hosts.push(get_current_component());
        }
    } 
    /*********
     end
    **********/
    function onClose() {
        dispatch('close', id)
    }
</script>
<!-- bind this -->
<button bind:this={_this} class='nested-button' on:click={onClose}>
    Close {id}
</button>

---

通过在不干扰svelte内部的情况下实现几乎完全相同的功能

我对svelte的编译代码进行了一些挖掘，找到了一个监听svelte已处理事件的解决方案，但这并不完美：）

调用

onClose

时，您可以（也应该）调度自己的自定义事件，但解决方案如下：

关于嵌套的.svelte

<script context="module">
    let counter = 0
</script>

<script>
    import { createEventDispatcher, onMount } from 'svelte';
    // add this
    import { get_current_component } from 'svelte/internal'; 
    let _this;
    const id = counter++
  const dispatch = createEventDispatcher()
    /*********
     and add this reactive statement
    **********/
    $: {
        if (_this){
            _this.parentNode.hosts = (_this.parentNode.hosts || []);
            _this.parentNode.hosts.push(get_current_component());
        }
    } 
    /*********
     end
    **********/
    function onClose() {
        dispatch('close', id)
    }
</script>
<!-- bind this -->
<button bind:this={_this} class='nested-button' on:click={onClose}>
    Close {id}
</button>

---

通过实现几乎完全相同的目标，而不影响斯维特的内部结构

感谢您提供完整的答案和这一棘手的解决办法。我会检查它，但是的，它似乎是不打算让苗条捕捉其组件事件…谢谢你这个完整的答案和这个棘手的解决办法。我会检查它，但是的，似乎苗条是不打算让捕捉其组件事件。。。

function onClose() {
        dispatch('close', id)
        this.dispatchEvent(new CustomEvent('close', {detail: id}));
    }