如何在Svelte的#await块中将svx.meta赋值给父组件的frontMatter

直接在:then块中直接赋值即可，不需要用函数包裹。Svelte允许在模板的表达式中执行赋值操作，只要用{}包裹语句就行。

修改后的SvxRenderer.svelte代码 #

<script lang="ts">
    import { loadSvx } from '$lib/loadSvx';
    import { fade } from 'svelte/transition';
    import Spinner from '$lib/components/ui/polish/spinner/Spinner.svelte';
    import ErrorRenderer from './ErrorRenderer.svelte';

    export let slug: string;
    export let frontMatter: any;

    let spinnerHidden = false;
</script>

{#await loadSvx(slug)}
    <div transition:fade on:outroend={() => (spinnerHidden = true)}>
        <Spinner></Spinner>
    </div>
{:then svx}
    <!-- 直接在这里赋值，不需要函数包裹 -->
    {frontMatter = svx.meta}
    {#if spinnerHidden}
        <div class="post-container" transition:fade>
            <svelte:component this={svx.content} />
        </div>
    {/if}
{:catch error}
    {#if spinnerHidden}
        <div transition:fade>
            <ErrorRenderer {error} />
        </div>
    {/if}
{/await}

为什么之前的方法无效？ #

你之前用{@const foo = () => (frontMatter = svx.meta )}只是定义了一个函数，但从未调用它，所以赋值操作根本没执行。直接写{frontMatter = svx.meta}会在:then块渲染时立即执行赋值，父组件通过bind:frontMatter就能实时拿到更新后的值。

额外优化建议 #

1. 避免使用any类型：定义一个FrontMatter接口来约束类型，比如：

   interface FrontMatter {
       title: string;
       // 其他你需要的属性
   }
   export let frontMatter: FrontMatter | null = null;
   

2. 处理空值情况：如果svx.meta可能为undefined，可以添加空值判断：

   {frontMatter = svx.meta ?? { title: '默认标题' }}
   

3. 调整spinner逻辑：如果希望父组件的标题和内容同步显示，可以把spinnerHidden的赋值移到:then块里，而不是等过渡结束：

   {:then svx}
       {frontMatter = svx.meta}
       {spinnerHidden = true}
       <div class="post-container" transition:fade>
           <svelte:component this={svx.content} />
       </div>
   {/if}
   

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