Svelte中如何向孙组件传递Props？为何孙组件接收值为null？

问题原因 #

• 根组件存在组件名错误：导入的是FirstChild，但渲染时用了<My />标签，这会导致子组件无法正确接收amount（不过你的子组件控制台输出了3，推测是代码输入时的笔误）
• 核心问题：子组件FirstChild接收到amount后，没有将该属性传递给孙组件MyChild，孙组件只能使用默认的null值

修正后的代码 #

根组件 #

<script>
  import FirstChild from "./FirstChild.svelte";
  let amount = 3;
</script>

<FirstChild {amount} />

子组件（FirstChild） #

<script>
  import MyChild from "./MyChild.svelte";
  export let amount = null;
  
  $: {
    console.log("amount child", amount); // 3
  }
</script>

<MyChild {amount} />

孙组件（MyChild） #

无需修改，此时会正确接收amount值，控制台将输出3，页面显示My amount is 3

补充说明 #

在Svelte中，组件不会自动向下传递未显式声明的prop，每一层中间组件都需要主动将需要传递的属性传给下一级组件。

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