在另一个组件内 Svelte 组件并在它们之间共享 props
Svelte component inside another component and share props between
我想问你如何在我的组件中使用 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
.
谢谢
我认为如果你传递像 {...$$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>
我想问你如何在我的组件中使用 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
.
谢谢
我认为如果你传递像 {...$$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>