Svelte 5中从父组件触发子输入组件blur方法的问题

你的问题出在父组件没有对input属性做双向绑定，导致子组件内部的真实输入框引用无法同步到父组件的input变量中，父组件调用blur()时变量还是undefined，所以报错。

具体修正步骤： #

1. 修改父组件的组件调用方式
   把父组件里的<MyInput {input} {value} />改成双向绑定写法：

   <MyInput bind:input bind:value />
   

   只有加上bind:前缀，子组件中用$bindable()声明的属性才能把内部的input元素引用同步回父组件。

2. 优化子组件的类型定义（可选但推荐）
   因为输入框初始化前input是undefined，所以Props类型里的input应该允许为undefined，避免类型警告：

   type Props = {
     input: HTMLInputElement | undefined
     value: string
   }
   

修正后的完整代码： #

MyInput.svelte

<script lang="ts">
type Props = {
  input: HTMLInputElement | undefined
  value: string
}

let { input = $bindable(), value = $bindable() }: Props = $props()
</script>

<input bind:this={input} bind:value />

Parent.svelte

<script lang="ts">
import MyInput from '$lib/MyInput.svelte'

let input: HTMLInputElement | undefined
let value = '' // 补充value的初始值，避免未定义问题

function blurField(){
  input?.blur() // 用可选链避免input未初始化时的报错
}
</script>

<MyInput bind:input bind:value />
<button onclick={() => blurField()}>Blur Field</button>

这样修改后，父组件的input变量会正确获取到子组件内部的输入框DOM引用，调用blur()就能正常触发输入框的失焦事件了。

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