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

Question

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

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

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

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

Answer 1

Svelte 现在还提供$$restProps. 请参阅Svelte API 文档 - 属性和道具。

\n

$$props引用传递给组件 \xe2\x80\x93 的所有属性，包括未使用导出声明的属性。它在极少数情况下很有用，但通常不推荐，因为 Svelte 很难优化。

\n

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

\n

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

\n

<input {...$$restProps}>\n

\n

Answer 2

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

$$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>