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

Question

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

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

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

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

Answer 1

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

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

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

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

<input {...$$restProps}>

Answer 2

您可以使用$$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>

Answer 3

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

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

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