如何将组件的值传递给它的父组件?

Question

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

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

Answer 1

如果你想绑定到value属性，你需要暴露它。在这里，我们还将value属性绑定到select元素，以便通过对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