如何将Svelte子组件的select值绑定传递到父组件变量

核心原因：自定义组件不会自动同步内部原生表单元素的值，需要手动在子组件内完成透传绑定，才能让父组件的bind:value生效。

子组件 Form.svelte 改造 #

首先导出value作为组件入参，同时将内部select的选中值和该入参双向绑定：

<script>
  // 声明接收父组件传递的value参数
  export let value;
</script>

<!-- 将原生select的值和组件的value参数双向绑定 -->
<select bind:value={value}>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

父组件 App.svelte 用法 #

父组件的绑定逻辑不需要调整，直接使用之前的写法即可正常同步值：

<script>
  import Form from './Form.svelte';
  // 要绑定的父组件变量
  let active = '1';
</script>

<Form bind:value={active} />
<p>当前选中值：{active}</p>

可选实现：自定义事件传递 #

如果不需要双向绑定，也可以通过事件派发的方式手动同步值：

• 子组件监听select的change事件，向外派发选中值：

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<select on:change={e => dispatch('selectChange', e.target.value)}>
  <!-- 选项内容 -->
</select>

• 父组件监听自定义事件更新变量：

<Form on:selectChange={e => active = e.detail} />

内容的提问来源于stack exchange，提问作者benman