在另一个组件内 Svelte 组件并在它们之间共享 props

Question

我想问你如何在我的组件中使用 Svelecte 并转发所有道具并将所有事件发送给父级。

我的情况：

App.Svelte

<script>
import Select from './Select.svelte';

const list = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2'}];
let myValue = null;
</script>

<h3>Select</h3>
<Select options={list} bind:value={myValue} label="Country"></Select>
<pre>{myValue}</pre>

Select.svelte

<script>
    import Svelecte from 'svelecte';

    export let label;
    let id = (Math.random() + 1).toString(36).substring(7);
</script>

<label for="{id}">{label}</label>
<Svelecte {...$$props} inputId={id}></Svelecte>

在这种情况下绑定不起作用。你能帮我如何使用我自己的组件，包括来自其他开发人员的其他组件和转发道具，并从那里获取所有事件吗？我在 select 之后需要 selected 项目并将数据获取到 App.Svelte.

谢谢

Answer 1

我认为如果你传递像 {...$$props} 这样的道具，你就会失去绑定。来自文档

$$props references all props that are passed to a component, including ones that are not declared with export. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.

只需导出选项和值并将它们声明并传递，它似乎可以工作 REPL

<script>
import Select from './Select.svelte';

const list = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2'}];
let myValue = null;
</script>

<h3>Select</h3>
<Select options={list} bind:value={myValue} label="Country"></Select>
<pre>{myValue}</pre>

Select.svelte

<script>
    import Svelecte from 'svelecte';

    export let label, options, value
        
    let id = (Math.random() + 1).toString(36).substring(7);
</script>

<label for="{id}">{label}</label>
<Svelecte {options} bind:value inputId={id}></Svelecte>

在另一个组件内 Svelte 组件并在它们之间共享 props

Svelte component inside another component and share props between

svelte

svelte-3

svelte-component

Select.svelte