时间戳

首页 > 解决方案 > 如何在 Svelte 组件中接收任意道具并传递给子组件？

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

问题描述

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

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

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

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

标签： javascriptsveltesvelte-3

解决方案

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

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

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

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

<input {...$$restProps}>

推荐阅读