Svelte组件能否派发自身实例？嵌套场景如何实现？

1. Svelte组件是否可以派发自身实例？ #

可以，Svelte支持组件通过事件机制将自身实例派发给父组件。

2. 嵌套场景下的实例传递实现 #

完全可以实现你的需求，核心是在Inner组件中获取自身实例，再通过createEventDispatcher派发出去。具体实现如下：

修改Inner.svelte代码

从svelte/internal引入get_current_component方法，它能直接获取当前组件的实例对象，在点击事件中将实例作为事件详情派发：

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import { get_current_component } from "svelte/internal";
  
  const dispatch = createEventDispatcher();
  // 获取当前Inner组件实例并做类型断言
  const selfInstance = get_current_component() as Inner;
</script>

<button on:click={() => dispatch("select", selfInstance)}>
  <p>Click me</p>
</button>

Outer.svelte代码无需额外修改

原代码中监听select事件并赋值的逻辑已经正确，接收事件详情即可拿到点击的Inner实例：

<script lang="ts">
  import Inner from "./Inner.svelte";

  let dynamicContent = Array.from({length: Math.floor(Math.random() * 10)}, () => "something");

  let lastSelectedInner: Inner | null = null;
</script>

{#each dynamicContent as item}
  <Inner on:select={(event) => lastSelectedInner = event.detail} />
{/each}

补充说明 #

• get_current_component()是Svelte内部提供的方法，专门用于获取当前组件的实例，适合需要直接操作组件实例的场景。
• TypeScript环境下需要将实例断言为Inner类型，保证类型校验通过。
• 这种方式无需维护所有Inner实例数组，每次点击只会更新lastSelectedInner为当前触发的组件实例。

内容的提问来源于stack exchange，提问作者goose_lake