Svelte如何根据子组件变量条件显示父组件中的包裹元素？

问题核心 #

你的代码存在两个关键问题：

1. 子组件里onMount(isAuthorized)是错误写法——onMount需要传入执行函数，而非变量，导致权限检查逻辑根本没触发；
2. 父组件用初始值为false的isAuthorized做条件渲染，直接跳过了子组件挂载，导致子组件无法执行权限检查并更新状态。

方案一：修正子组件逻辑，同步权限状态给父组件 #

先修复子组件的代码错误，同时导出isAuthorized变量，让父组件能获取权限检查结果：

修改后的子组件（FooButton.svelte）

<script>
    // 导出变量供父组件绑定
    export let isAuthorized = false;

    async function updateIsAuthorized() {
        isAuthorized = await hasPermission('CREATE_FOO');
    }

    // 传入执行函数，正确触发权限检查
    onMount(updateIsAuthorized);
</script>

{#if isAuthorized}
    <Button>创建Foo</Button>
{/if}

父组件需要先渲染子组件（保证权限检查能执行），再根据返回的状态控制Card的显示：
父组件写法

<script>
    import FooButton from './FooButton.svelte';
    let isAuthorized = false;
</script>

<!-- 先渲染子组件执行权限检查，用样式隐藏避免DOM干扰 -->
<FooButton bind:isAuthorized style="display: none;" />

{#if isAuthorized}
    <Card>
        <FooButton />
    </Card>
{/if}

方案二：抽离权限逻辑到共享Store（推荐） #

如果多个组件需要用到同一权限状态，将检查逻辑抽离到Svelte Store可以避免重复请求，同时让状态在组件间共享：

创建权限Store（stores/permission.js）

import { writable } from 'svelte/store';

// 封装权限检查逻辑，返回可订阅的Store
export function createPermissionStore(permissionKey) {
    const { subscribe, set } = writable(false);

    async function checkPermission() {
        const hasPerm = await hasPermission(permissionKey);
        set(hasPerm);
    }

    // 初始化时执行检查
    checkPermission();

    return { subscribe };
}

子组件（FooButton.svelte）

<script>
    import { createPermissionStore } from './stores/permission.js';
    // 创建对应权限的Store
    const isAuthorized = createPermissionStore('CREATE_FOO');
</script>

{#if $isAuthorized}
    <Button>创建Foo</Button>
{/if}

父组件

<script>
    import FooButton from './FooButton.svelte';
    import { createPermissionStore } from './stores/permission.js';
    // 复用同一个权限Store，避免重复请求
    const isAuthorized = createPermissionStore('CREATE_FOO');
</script>

{#if $isAuthorized}
    <Card>
        <FooButton />
    </Card>
{/if}

这种方式更符合Svelte状态管理的最佳实践，权限检查只会执行一次，所有用到该权限的组件都会同步状态。

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