这个在 onMount 指令中包含订阅者的 props 传递方法是如何工作的？

Question

我正在尝试在 Svelte 中使用 Monaco 编辑器。我在网上找到了这个片段，它有一种有趣的定义组件的方式。看起来它在 onMount 阶段声明了这个

content

对象，这应该允许父组件订阅

editor.onDidChangeModelContent

事件。但是，我不知道父组件如何使用

content

作为道具。也许我可以得到一些帮助？

// MonacoEditor.svelte
let subscriptions = [];
export let content;
onMount(async () => {
   editor.onDidChangeModelContent(() => {
       const text = editor.getValue();
       subscriptions.forEach((sub) => sub(text));
   });
   content = {
       subscribe(func) {
           subscriptions.push(func);
           return () => {
               subscriptions = subscriptions.filter((sub) => sub != func);
           };
       },
       set(val) {
           editor.setValue(val);
       },
   };
   return () => {
       editor.dispose();
   };
});

我尝试在父组件中使用绑定并在父组件内的 onMount 指令中声明内容，但没有一个完全有意义，也没有一个起作用......

Answer 1

我在我的一个 SvelteKit 项目中使用了 Monaco 编辑器。我通过 npm 包@monaco-editor/loader 使用它，这使得它比使用他们的“普通”npm 包更容易使用（至少一年前是这样）。这是我在 SvelteKit 中使用它的代码：

src/lib/CodeEditor.svelte

<script>
    
    export let code = ""
    
    import monacoLoader from '@monaco-editor/loader'
    
    let monacoEditor
    
    async function showEditor(editorContainer){
        
        const monaco = await monacoLoader.init()
        
        monacoEditor = monaco.editor.create(editorContainer, {
            value: code,
            automaticLayout: true,
            language: 'javascript',
        })
        
    }
    
    export function getCode(){
        return monacoEditor.getValue()
    }
    
</script>

<div
    use:showEditor
/>

然后在其他 Svelte 组件中使用它，如下所示：

<script>
    
    import CodeEditor from '$lib/CodeEditor.svelte'
    
    let codeEditor
    
    function alertCode(){
        
        const code = codeEditor.getCode()
        
        alert(code)
        
    }
    
</script>

<button on:click={alertCode}>
    Alert Code
</button>

<CodeEditor
    code="// The code"
    bind:this={codeEditor}
/>

（我的项目中的代码比这个大得多，所以我删除了我认为不相关的部分，我希望我没有删除太多^^'）