Question

我想从“上方”接收任意道具并将它们散布到<input>上，如此处所示，其中inputProps会成为包含在此组件上设置的任何其他道具的对象（类似于python的{ {1}}（如果您熟悉的话）：

**kwargs

您能指出我正确的Svelte机制来完成这样的事情吗？我感觉自己在问一个错误的问题，但是我需要一个精明的开发人员来帮助我。我应该改用插槽吗？还是了解动作/“使用指令”？

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

Answer 2

导出时，您无需使用价差运算符

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

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

Working example with some sample code

Answer 3

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

$$props引用传递给组件的所有道具，包括未通过export声明的道具。它在极少数情况下很有用，但通常不建议使用，因为Svelte难以优化。

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

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

<input {...$$restProps}>

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

3 个答案: