如何将组件的值传递给其父级？

【问题标题】：How to pass the value of a component up to its parent?如何将组件的值传递给其父级？
【发布时间】：2021-09-26 05:06:20
【问题描述】：

我想将 Svelte 组件 (Form.svelte) 中的选择元素的值绑定到其父 (App.svelte) 中的变量 active。我尝试在 App 的 Form 组件上使用 bind:value={active}，但这不起作用，因为我需要访问选择的值。我应该如何访问 select 元素的值？提前致谢。

最小工作示例：https://svelte.dev/repl/bc872132e21f4071abe5a255728fb0ec?version=3.43.0

【问题讨论】：

标签： javascript components parent svelte svelte-3

【解决方案1】：

如果要绑定到 value 属性，则需要公开它。在这里，我们还将value 属性绑定到select 元素，以便它随着选择的更改而更新。

/* Select.svelte */

<script>
    export let value
</script>

<select bind:value>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

然后你可以在你的父母中绑定到它

/* App.svelte */

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

<Select bind:value={active}/>

<p>{active}</p>

REPL

【讨论】：