$props and $bindable — Component Props

ใน React component ประกาศ props ผ่าน function parameters (หรือ TypeScript interface) Props เป็น one-way, read-only เสมอ — child เรียก callback เพื่อขอให้ parent อัปเดต Svelte 5 แนะนำ $props() สำหรับ one-way model เดียวกัน บวก $bindable() สำหรับ two-way binding แบบ opt-in ที่ขจัด callback boilerplate

$props() — ประกาศ props พร้อม defaults

// Child
function Greeting({ name = 'World', color = 'black' }) {
  return <p style={{ color }}>Hello, {name}!</p>;
}

// Parent
function App() {
  return <Greeting name="Alice" color="steelblue" />;
}

<script>
  let { name = 'World', color = 'black' } = $props();
</script>

<p style="color: {color}">Hello, {name}!</p>

$props() คืน object ที่คุณ destructure แบบปกติ Default values ใช้ JS destructuring defaults มาตรฐาน ไม่ต้องใช้ propTypes ไม่ต้องสร้าง TypeScript interface แยก (แม้จะเพิ่ม interface Props และ annotate $props<Props>() ก็ได้)

Rest props / forwarding

function Button({ children, variant = 'primary', ...rest }) {
  return (
    <button className={'btn btn-' + variant} {...rest}>
      {children}
    </button>
  );
}

<script>
  let { children, variant = 'primary', ...rest } = $props();
</script>

<button class="btn btn-{variant}" {...rest}>
  {@render children?.()}
</button>

...rest spread ส่ง attribute พิเศษไปยัง element ที่อยู่ภายใน — เหมือน React ทุกประการ

$bindable() — two-way props (ไม่ต้องใช้ callback)

React ต้องใช้ “lifting state”: parent เป็นเจ้าของค่า child รับเป็น prop และ setter callback $bindable() ของ Svelte ให้ parent ใช้ bind:propName บน child ทำให้ child สามารถเขียนกลับไปยังตัวแปรของ parent ได้โดยไม่ต้องมี callback ชัดเจน

// React: parent must own state + pass setter down
function TextInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

function App() {
  const [text, setText] = React.useState('');
  return (
    <div>
      <TextInput value={text} onChange={setText} />
      <p>You typed: {text}</p>
    </div>
  );
}

<script>
  // Child: TextInput.svelte
  let { value = $bindable('') } = $props();
</script>

<input bind:value />

<!-- Parent usage: <TextInput bind:value={text} /> -->

ทดลองได้เลย: bindable counter ในไฟล์เดียว

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  import { mount } from 'svelte';

  // Simulate a parent + child in one file using snippets
  let count = $state(10);
  let step = $state(1);

  function inc() { count += step; }
  function dec() { count -= step; }
</script>

<div style="font-family:sans-serif;padding:1rem">
  <h3>Parent owns count</h3>
  <p>count = <strong>{count}</strong></p>
  <label>
    Step: <input type="number" bind:value={step} style="width:4rem;margin-left:0.5rem" min="1" />
  </label>

  <div style="margin-top:1rem">
    <h4>Child-like controls (bind:step, bind:count)</h4>
    <button onclick={dec}>- {step}</button>
    <button onclick={inc} style="margin-left:0.5rem">+ {step}</button>
  </div>
</div>

🔀 React props vs $props / $bindable

React props: destructured function parameters Svelte 5: let { a, b = default } = $props() — destructuring เดิม ต่างที่ declaration site
React props เป็น one-way read-only เสมอ ให้ child อัปเดต state ของ parent ต้องส่ง callback (onChange, onSubmit ฯลฯ) $bindable() ของ Svelte ข้าม callback และใช้ bind:propName ฝั่ง parent สำหรับ two-way binding
React ...rest spread สำหรับ forward attributes: {...rest} บน JSX element Svelte: {...rest} เหมือนกันบน element — syntax เดียวกัน
TypeScript types: React ใช้ interface Props หรือ inline destructuring types Svelte ใช้ $props<Props>() generic — interface เดียวกัน ต่างที่ call site
$bindable() เป็น opt-in — เฉพาะ props ที่ประกาศด้วย $bindable() เท่านั้นที่ใช้กับ bind: ได้ props อื่นยังคง read-only ใน child