Svelte插槽Props传递异常求助：组件内传参失效

问题原因 #

你在Action.svelte中给插槽绑定了strokeColor、fillColor、test等props，但父组件App.svelte里直接使用<Icon {size}/>时，并未接收插槽传递的这些参数，导致Icon组件无法获取Action内部的这些值。Svelte的插槽props属于作用域插槽，必须由父组件主动接收后，才能传递给插槽内的子组件。

解决方案一：父组件接收插槽props并传递给Icon #

修改App.svelte的插槽使用方式，通过let:语法接收Action插槽传递的参数，再转发给Icon：

<!-- App.svelte -->
<script>
    import Action from "./Action.svelte"
    import Icon from "./Icon.svelte"
    let size = 50;
</script>

<Action id="Home" isActive={true}>
  <!-- 接收插槽props并传递给Icon -->
  <Icon {size} let:strokeColor let:fillColor let:test {strokeColor} {fillColor} {test}/>
</Action>

也可以用更清晰的解构写法：

<Action id="Home" isActive={true}>
  {#slot let:strokeColor let:fillColor let:test}
    <Icon {size} {strokeColor} {fillColor} {test}/>
  {/slot}
</Action>

解决方案二：Action组件直接渲染Icon（插槽内容固定场景） #

如果Action组件的插槽始终只放置Icon，可以直接在Action内部引入Icon并传递props，省去插槽的使用：

<!-- Action.svelte -->
<script>
    import { createEventDispatcher } from "svelte";
    import Icon from "./Icon.svelte";
    const dispatch = createEventDispatcher();

    export let isActive = false;
    export let id = "unassigned";
    export let size = 12; // 允许父组件传入size
    let strokeColor = "#f00";
    let fillColor= "#0f0";
    let fontColor = "#333";

    const enter = () => {
        if (isActive) {
            strokeColor = "#ccc";
            fillColor = "#999";
        }
    };

    const leave = () => {
        strokeColor = "#00f";
        fillColor = "#16e";
    };
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
    <Icon {size} {strokeColor} {fillColor} test={id}/>
    <div>action: {size}-{id}-{strokeColor}-{fillColor}</div>
</div>

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