如何将道具传递给苗条的孙子？答案

【问题标题】：How to pass props to grand child in svelte?如何将道具传递给苗条的孙子？
【发布时间】：2023-01-18 05:10:53
【问题描述】：

在 svelte 中，我想将 prop 值传递给一个 grand child 组件。不幸的是它总是空的。为什么它是空的？

根组件

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

第一个子组件

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

孙组件

<script>
    export let amount = null;
    
    $: {
        console.log("amount grandchild", amount); // null
    }
</script>
<p>
    My amount is {amount}
</p>

【问题讨论】：

标签： svelte

【解决方案1】：

您没有将道具传递给第一个子组件上的组件给孙子。所以：

第一个子组件：

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

【讨论】：

【解决方案2】：

如果你想让一个值对后代组件可用，你可以使用setContext和getContext。任何上下文在任何后代中都可用，无需传递属性。

【讨论】：