Svelte中如何向插槽传递变量？（不使用stores）

问题核心 #

你当前的代码中，IconWrapper已经通过插槽传递了fillColor，但Icon组件没有接收这个插槽提供的变量，导致始终使用自身的默认值#00f。下面提供两种对应你需求的解决方案：

方案1：从外部组件直接传递变量（使用#f00） #

既然App组件可以直接访问Icon，无需通过插槽中转，直接给Icon传递属性即可：

修改App.svelte：

<script>
    import IconWrapper from "./IconWrapper.svelte"
    import Icon from "./Icon.svelte"
    export let fillColor = '#f00';
</script>

<IconWrapper>
  <Icon {fillColor} />
</IconWrapper>

此时Icon会直接使用App中定义的#f00作为填充色。

方案2：从插槽容器传递变量（使用#0f0或自定义值） #

如果需要让IconWrapper控制传递给插槽内容的变量，需要使用作用域插槽，步骤如下：

1. 保持IconWrapper.svelte不变（已定义插槽传递fillColor）：

<script>
  export let fillColor = '#0f0';
</script>

<div>
  <slot fill={fillColor}/>
</div>

2. 在App.svelte中接收插槽传递的变量并传给Icon：

<script>
    import IconWrapper from "./IconWrapper.svelte"
    import Icon from "./Icon.svelte"
    // 若要覆盖IconWrapper的默认值，可传递fillColor给它
    // export let fillColor = '#f00';
</script>

<IconWrapper>
  <!-- 用let:fillColor接收插槽变量，直接传给Icon -->
  <Icon let:fillColor />
</IconWrapper>

如果变量名不一致，也可以手动映射：

<IconWrapper>
  <Icon let:fill={fillColor} />
</IconWrapper>

这样Icon就会使用IconWrapper提供的#0f0（或你传给IconWrapper的自定义值）。

关键说明 #

插槽传递的变量必须通过let:变量名在插槽内容上接收，才能将容器的变量注入到内容组件中。这是作用域插槽的核心用法，无需依赖Stores即可实现组件间的变量传递。

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