Svelte中无需中间组件导出属性，如何传递props给孙组件？

可以实现，核心方案是利用Svelte的$$restProps #

$$restProps是Svelte内置的特殊对象，会收集组件接收到的所有未显式导出的属性。你可以在中间组件里把它转发给孙组件：

修改中间组件（Component.svelte） #

<script>
import Button from './Button.svelte';
</script>

<h1>
    Hello from the component
    <br>
    <!-- 把所有未导出的属性转发给Button组件 -->
    <Button {...$$restProps}/>
</h1>

这样父组件传递的buttonText="Hello"会被$$restProps捕获，自动传递给Button组件的对应prop，中间组件无需额外导出任何属性。

如果只想精准转发特定属性（避免传递多余属性），可以单独提取：

<Button buttonText={$$restProps.buttonText}/>

多子组件场景的优化方案 #

如果中间组件包含多个子组件（按钮、表单等），直接用$$restProps可能会导致属性混乱，推荐用分组属性的方式：

父组件（App.svelte） #

<script>
import Component from './Component.svelte'
</script>

<!-- 按子组件分组传递属性 -->
<Component 
  buttonProps={{buttonText: "Hello"}} 
  formProps={{inputPlaceholder: "请输入内容"}}
/>

中间组件（Component.svelte） #

<script>
import Button from './Button.svelte';
import Form from './Form.svelte';

// 只导出分组属性，避免单个导出大量子组件prop
export let buttonProps = {};
export let formProps = {};
</script>

<h1>
    Hello from the component
    <br>
    <Button {...buttonProps}/>
    <Form {...formProps}/>
</h1>

这种方式既保持了中间组件导出列表的简洁，又能清晰地给不同子组件传递对应属性，避免重复或混乱问题。

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