主页 / coding / 问题 / 79146086
Accepted
Clifton Labrum
Asked: 2024-11-01 03:16:12 +0800 CST

在 Svelte 5 中模糊来自父级的子输入组件

  • 772

我有一个<MyInput />像这样的自定义组件：

<script lang="ts">
//=== MyInput.svelte ===

type Props = {
  input: HTMLInputElement
  value: string
}

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

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

我希望能够以编程方式从父组件模糊此字段，无论它在何处使用。

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

let input: HTMLInputElement

function blurField(){
  input.blur() <!-- console error
}
</script>

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

我不清楚如何将input父组件中的引用绑定到实际的子组件。它似乎实际上没有将input父组件中的引用与子组件的绑定联系起来。

知道我做错了什么吗？

svelte

1 个回答

  1. Best Answer

    bind:您至少需要组件的输入：

    <MyInput bind:input {value} />

    （没有它，价值观就只能被传承下去。）

    • 1

相关问题