如何在 Svelte 組件中接收任意道具並傳遞給子組件？

Question

我想從“above”接收任意道具並將它們傳播到<input> ，如下所示，其中inputProps將成為包含在此組件上設置的任何其他道具的對象（類似於 python 的**kwargs ，以防你熟悉)：

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

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

你能指出正確的 Svelte 機制來完成這樣的事情嗎？ 我有一種感覺，我問錯了問題，但我需要一個苗條的開發人員來糾正我。 我應該改用插槽嗎？ 或者了解操作/“使用指令”？

Answer 1

你可以使用$$props來訪問所有賦予組件的 props。

$$props引用所有傳遞給組件的 props——包括那些沒有用export聲明的 props。 它在極少數情況下很有用，但通常不推薦使用，因為 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

Svelte 現在還提供$$restProps 。 請參閱Svelte API 文檔 - 屬性和道具。

$$props引用所有傳遞給組件的 props——包括那些沒有用 export 聲明的 props。 它在極少數情況下很有用，但通常不推薦使用，因為 Svelte 很難優化。

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

$$restProps僅包含未通過導出聲明的道具。 它可用於將其他未知屬性傳遞給組件中的元素。

<input {...$$restProps}>

Answer 3

導出時您不需要使用擴展運算符

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

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

帶有一些示例代碼的工作示例