如何在Svelte中覆盖组件默认Props，无需单独文件生成新组件

完全可以不用创建单独的.svelte文件，直接在index.js中通过封装Base组件来定义Card、Col这类带有默认Props的组件，核心是利用Svelte组件的默认Props特性，具体实现有两种简洁方式：

方式一：通用工具函数封装 #

先写一个复用性强的工具函数，用来快速生成带默认Props的子组件：

import Base from './Base.svelte';

// 生成带默认Props的Bootstrap组件
const createBsComponent = (defaultProps) => ({
  ...Base,
  defaults: { ...Base.defaults, ...defaultProps }
});

// 定义Card和Col组件
const Card = createBsComponent({ container: "lg", mb: "3", p: "3", tag: "div" });
const Col = createBsComponent({ col: "6", tag: "div" });

export { Col, Card, Base };

方式二：直接扩展组件默认值 #

如果不需要复用创建逻辑，也可以直接给每个组件单独扩展默认Props：

import Base from './Base.svelte';

const Card = {
  ...Base,
  defaults: {
    ...Base.defaults,
    container: "lg",
    mb: "3",
    p: "3",
    tag: "div"
  }
};

const Col = {
  ...Base,
  defaults: {
    ...Base.defaults,
    col: "6",
    tag: "div"
  }
};

export { Col, Card, Base };

关键注意点 #

• 这种方式依赖Svelte组件的defaults属性，确保你的Base组件已经通过export let声明了Props并设置了默认值（比如export let container = ''），这样组件的defaults对象才会包含这些属性。
• 封装后的组件完全继承Base的所有特性，包括插槽、事件监听、生命周期钩子等，只是覆盖了默认Props。

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