Svelte中含onMount订阅器的props传递机制及Monaco Editor使用疑问

这个子组件里的content是一个自定义可写Store，实现了Svelte Store的核心接口（包含subscribe方法监听内容变化、自定义set方法设置编辑器内容）。父组件需要通过绑定获取这个Store对象，再用Store专属语法交互，具体用法如下：

父组件正确操作步骤 #

1. 绑定获取Store对象 #

在父组件中通过bind:content绑定子组件的content属性，拿到初始化后的Store对象：

<script>
import MonacoEditor from './MonacoEditor.svelte';
// 接收子组件的content Store
let editorContent;
</script>

<MonacoEditor bind:content={editorContent} />

2. 监听编辑器内容变化 #

自动订阅（推荐）

用Svelte的$语法自动订阅Store，实时获取当前内容，无需手动管理订阅生命周期：

<!-- 实时显示编辑器内容 -->
<p>当前编辑器内容：{$editorContent}</p>

手动订阅（适合自定义逻辑场景）

如果需要在内容变化时执行额外逻辑，可手动调用subscribe方法：

<script>
import { onDestroy } from 'svelte';
// ... 前面的代码

let unsubscribe;

// 等editorContent初始化后再订阅（反应式语句确保时机正确）
$: if (editorContent) {
  unsubscribe = editorContent.subscribe(text => {
    console.log('编辑器内容更新：', text);
    // 这里可添加自定义逻辑，比如同步到后端、校验内容等
  });
}

// 组件销毁时取消订阅，避免内存泄漏
onDestroy(() => {
  if (unsubscribe) unsubscribe();
});
</script>

3. 设置编辑器内容 #

通过Store的set方法直接修改编辑器内容：

{#if editorContent}
<button on:click={() => editorContent.set('Hello Monaco Editor!')}>
  设置初始内容
</button>
{/if}

绑定失败原因说明 #

你之前操作无效的核心原因：content是在子组件onMount中异步初始化的，父组件如果在自身onMount里直接访问editorContent会是undefined，必须通过反应式语句（$:）或条件判断（{#if}）确保Store初始化完成后再操作。另外，content是Store对象而非普通字符串，不能用普通变量的绑定逻辑直接处理。

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