如何在 Svelte 组件中接收任意道具并传递给子组件？答案

【问题标题】：How can I receive arbitrary props in a Svelte component and pass to a child component?如何在 Svelte 组件中接收任意道具并传递给子组件？
【发布时间】：2020-04-09 13:51:40
【问题描述】：

我想从“上方”接收任意道具并将它们传播到<input>，如此处所示，其中inputProps 将成为包含在此组件上设置的任何其他道具的对象（类似于python的**kwargs，在你熟悉的情况下）：

<script>
export let id;
export ...inputProps;
</script>

<div>
    id: {id}
    <input {...inputProps} />
</div>

您能否指出完成此类事情的正确 Svelte 机制？我觉得我问错了问题，但我需要一个苗条的开发人员来纠正我。我应该改用插槽吗？或者了解操作/“使用指令”？

【问题讨论】：

标签： javascript svelte svelte-3

【解决方案1】：

您可以使用$$props 访问给组件的所有道具。

$$props 引用传递给组件的所有道具 - 包括那些没有用export 声明的。它在罕见的情况下很有用情况下，但通常不推荐，因为 Svelte 很难优化。

示例 (REPL)

<!-- App.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child id="foo" placeholder="bar" />

<!-- Child.svelte -->
<script>
  let id, inputProps;
  $: ({ id, ...inputProps } = $$props);
</script>

<div>
  id: {id}
  <input {...inputProps} />
</div>

【讨论】：

【解决方案2】：

Svelte 现在还提供$$restProps。请参阅Svelte API Docs - Attributes and props。

$$props 引用了所有传递给组件的 props——包括那些没有用 export 声明的。它在极少数情况下很有用，但通常不推荐，因为 Svelte 很难优化。

<Widget {...$$props}/>

$$restProps 仅包含未在 export 中声明的道具。它可用于将其他未知属性传递给组件中的元素。

<input {...$$restProps}>

【讨论】：

【解决方案3】：

导出时不需要使用扩展运算符

<script>
 export let id;
 export inputProps;
</script>

<div>
 id: {id}
 <input {...inputProps} />
</div>

【讨论】：

请检查您的链接