เข้าถึง props ทั้งหมดด้วย $$propsใน svelte3

#svelte3 #slot #slotcontent

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 ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ

DEV Community