Svelte中两个子组件间的函数调用问题求助

在Svelte里实现Editor和Preview的内容同步，最直接的方式是把共享状态提升到父组件，利用Svelte的响应式系统自动触发更新，无需手动调用更新函数。以下是具体实现步骤：

1. 父组件 MainContent.svelte #

将编辑器的内容状态放在这里，作为两个子组件的统一数据源：

<script>
  import Editor from './Editor.svelte';
  import Preview from './Preview.svelte';

  // 共享状态：存储编辑器内容
  let editorContent = '';
</script>

<div class="main-content">
  <!-- 双向绑定编辑器内容到父组件状态 -->
  <Editor bind:content={editorContent} />
  <!-- 将状态作为props传递给预览组件 -->
  <Preview content={editorContent} />
</div>

2. 子组件 Editor.svelte #

导出content属性，通过双向绑定让输入内容自动同步到父组件：

<script>
  // 导出prop，支持父组件双向绑定
  export let content = '';
</script>

<textarea 
  bind:value={content}
  placeholder="输入内容..."
  rows="20"
  style="width: 100%; padding: 1rem; box-sizing: border-box;"
/>

如果你的编辑器是第三方组件（非原生textarea），可以通过事件触发更新：

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  let content = '';

  function handleInput(e) {
    content = e.target.value;
    // 向父组件发送内容变化事件
    dispatch('change', content);
  }
</script>

<textarea 
  value={content}
  on:input={handleInput}
  placeholder="输入内容..."
  rows="20"
  style="width: 100%; padding: 1rem; box-sizing: border-box;"
/>

对应的父组件需要修改为监听事件：

<Editor on:change={(e) => editorContent = e.detail} />

3. 子组件 Preview.svelte #

接收content属性，直接渲染即可，Svelte会自动在属性变化时更新组件：

<script>
  export let content = '';

  // 如果需要处理内容（比如Markdown转HTML），可在此添加逻辑
  $: processedContent = content; // 替换为你的处理函数，比如marked(content)
</script>

<div class="preview" style="border: 1px solid #eee; padding: 1rem; margin-top: 1rem;">
  <!-- 渲染文本内容 -->
  {processedContent}
  <!-- 如果是HTML内容，使用@html指令渲染 -->
  <!-- {@html processedContent} -->
</div>

核心逻辑说明 #

Svelte的响应式系统会自动追踪状态变化，当父组件的editorContent更新时，所有依赖该状态的子组件（Preview）会立即重新渲染，这比Vanilla JS手动监听DOM事件、调用更新函数的方式更简洁高效，也是Svelte便于项目维护的核心特性之一。

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