如何将组件的值传递给其父组件?
How to pass the value of a component up to its parent?
我想将 Svelte 组件 (Form.svelte) 中 select 元素的值绑定到其父组件 (App.svelte) 中的变量 active
。我试过在 App 的表单组件上使用 bind:value={active}
,但这不起作用,因为我需要访问 select 的值。我应该如何访问 select 元素的值?提前致谢。
最小工作示例:https://svelte.dev/repl/bc872132e21f4071abe5a255728fb0ec?version=3.43.0
如果要绑定到 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>
我想将 Svelte 组件 (Form.svelte) 中 select 元素的值绑定到其父组件 (App.svelte) 中的变量 active
。我试过在 App 的表单组件上使用 bind:value={active}
,但这不起作用,因为我需要访问 select 的值。我应该如何访问 select 元素的值?提前致谢。
最小工作示例:https://svelte.dev/repl/bc872132e21f4071abe5a255728fb0ec?version=3.43.0
如果要绑定到 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>