Svelte中如何简便继承sveltestrap组件并保留原有属性？

Svelte 原生支持对现有组件做继承式二次封装，你写的基础逻辑已经实现了loading态切换内容的核心效果，只需要补全属性、事件透传逻辑，就能完整保留原sveltestrap Button组件的所有配置能力。

你当前代码的核心问题是没有做属性和事件透传：外部传入的sveltestrap Button原生配置（比如color、size、outline、点击事件等）不会自动落到内部的Button组件上，相当于外层组件把这些参数拦截了。

修正后可直接使用的封装代码 #

<script lang="ts">
    import { Button, Spinner } from 'sveltestrap';
    // 自定义新增的loading参数
    export let loading = false;
</script>

<Button
    {...$$restProps}
    disabled={loading || $$restProps.disabled}
    on:*
>
    {#if loading}
        <Spinner size="sm" class="me-2" />
    {/if}
    <slot />
</Button>

关键实现说明 #

• {...$$restProps} 会接收所有没有通过export let显式声明的外部传入参数，直接展开传给内部Button组件，不需要手动逐个声明原组件的所有配置项，后续sveltestrap升级新增Button属性也能自动兼容。
• on:*是Svelte的批量事件转发语法，原Button抛出的所有事件（点击、聚焦、失焦等）都会直接向外传递，外部给封装组件绑定事件的写法和直接用原Button完全一致。
• disabled={loading || $$restProps.disabled}是通用体验优化：加载状态自动禁用按钮避免重复点击，同时保留外部手动传入disabled属性的控制能力。
• 代码里给Spinner加了小尺寸和右侧边距是通用排版优化，你可以根据自己项目的样式需求调整；如果需要loading状态下完全隐藏按钮文字只显示加载动画，把<slot />移回{:else}块即可。

内容的提问来源于stack exchange，提问作者Chase R Lewis