主页 / user-1142348

Clifton Labrum's questions

Martin Hope
Clifton Labrum
Asked: 2024-11-01 03:16:12 +0800 CST
  • 5

我有一个<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
Martin Hope
Clifton Labrum
Asked: 2024-10-30 03:15:40 +0800 CST
  • 7

假设我有一个名为的父组件SplitView.svelte：

<script lang="ts">
  import type { Snippet } from 'svelte'
  
  type Props = {
    master: Snippet
    detail: Snippet
  }
  let { master, detail }: Props = $props()
</script>

<div class="split">
  <div id="master">
    {@render master()}
  </div>
  <div id="detail">
    {@render detail()}
  </div>
</div>

我在其他地方使用过这样的方法：

<script lang="ts">
  import SplitView from '$lib/components/shared/SplitView.svelte'
  import Master from './master/PricingMaster.svelte'
  import Detail from './detail/PricingDetail.svelte'
</script>

<SplitView master={Master} detail={Detail} /> <-- ESLint error

我在master和detail属性上遇到了一个 linter 错误：

Type '__sveltets_2_IsomorphicComponent<Record<string, never>, 
{ [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'Snippet<[]>'.

Target signature provides too few arguments. Expected 2 or more, but got 0.ts(2322)

作为 props 发送的组件是否不是类型Snippet？我做错了什么？

svelte