Props ใน Svelte คืออะไร
props คือการ pass ค่าต่างๆไปให้ child component ใช้งาน สามารถ pass props แบบ static และ pass แบบ object หรือใช้การ pass แบบ spread props
/** Button.svelte */
<script>
export let title;
</script>
<button>
{title}
</button>
/** App.svelte */
<script>
import Button from "./Button.svelte";
</script>
<main>
<Button title='Toggle' />
</main>
pass props แบบ static
title='Toggle' เรียกว่าการ pass แบบ static
pass props ผ่านตัวแปร
/** App.svelte */
<script>
import Button from "./Button.svelte";
const title = 'Toggle'
</script>
<main>
<Button title={title} />
</main>
หรือ
<main>
<Button {title} />
</main>
title={title} เรียกว่าการ pass props ผ่านตัวแปร
pass props ผ่าน Object
/** App.svelte */
<script>
import Button from "./Button.svelte";
const props = {
title: 'Toggle'
}
</script>
<main>
<Button title={props.title} />
</main>
text={title} เรียกว่าการ pass props ผ่าน Object
pass props ผ่าน Spread props
/** App.svelte */
<script>
import Button from "./Button.svelte";
const props = {
title: 'Toggle',
name: 'myName'
}
</script>
<main>
<Button {...props} />
</main>
{...props} เรียกว่าการ pass props โดยการใช้ spread operator มาช่วย ในการ pass ค่า ผ่าน Object ฝั่ง child component จะได้ props ทั้งหมดในตัวแปร props
/** Button.svelte */
<script>
export let title;
export let name;
</script>
<button {name}>
{title}
</button>
เราสามารถรับค่า name เพิ่มได้จาก object props ที่ pass เข้ามา
access props ผ่าน $$props
/** App.svelte */
<script>
import Button from "./Button.svelte";
const props = {
title: 'Toggle',
name: 'myName'
}
</script>
<main>
<Button {...props} />
</main>
/** Button.svelte */
<script>
let {title, name } = $$props
</script>
<button {name}>
{title}
</button>
จากตัวอย่างก้านบนเราสามารถรับค่า title, name มาได้จาก $$props ซึ่งตัว $$props จะเก็บค่า props ที่มีการ pass มาไว้ทั้งหมด
/** Button.svelte */
<button {$$props.name}>
{$$props.title}
</button>
หรือจะใช้แบบนี้ก้ได้ ทำให้โค้ดสั้นลงอีกมาก เพียงเท่านี้เราก็สามารถรับค่า props มาใช้งานได้แล้ว ง่ายไหมครับ svelte
หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ
Top comments (0)