Svelte中子组件如何向隔代祖父组件派发事件并传递数据

问题原因 #

Svelte 官方的 createEventDispatcher 触发的自定义事件默认不支持冒泡，仅能被当前组件的直接父组件监听，因此你在子组件触发的 result 事件无法直接被祖父组件接收，中间父组件没有做事件转发是调用失败的核心原因。

方案1：中间层事件转发（适配你当前3层组件场景，成本最低） #

只需要在中间的父组件（Search）上监听子组件抛出的 result 事件，再将事件重新转发到上层即可，代码修改如下：

父组件（Search）新增逻辑 #

<script>
  import { createEventDispatcher } from 'svelte';
  import Response from './Response.svelte';
  const dispatch = createEventDispatcher();
  // 你原有的搜索、调用API获取res的逻辑保留
</script>

<div class="search-results">
  <!-- 监听子组件事件，拿到数据后转发给祖父组件 -->
  <Response data={res} on:result={e => dispatch('result', e.detail)} />
</div>

修改后祖父组件中原本的 on:result 监听就能正常接收子组件上报的数据了。

方案2：上下文 + 响应式Store（适合层级更深、多后代组件通信场景） #

如果后续你的组件层级继续加深，层层转发事件效率较低，可以使用Svelte内置的上下文API配合响应式Store实现跨层级通信，不需要中间层做任何额外处理：

祖父组件定义共享状态并注入上下文 #

<script>
  import { setContext, writable } from 'svelte';
  import Search from './Search.svelte';

  // 创建响应式存储保存选中的结果
  const selectedResult = writable(null);
  // 将存储注入上下文，所有后代组件都可以读取
  setContext('search_result_store', selectedResult);

  function handleSubmit() {
    // 直接读取响应式变量即可拿到选中的数据
    console.log($selectedResult);
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <Search bind:item={item} />
</form>

子组件直接更新共享状态 #

<script>
  import { getContext } from 'svelte';
  // 从上下文拿到共享存储
  const selectedResult = getContext('search_result_store');
</script>

<button on:click={() => $selectedResult = data}>Click</button>

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