มาดูตัวอย่างการใช้ Components ใน VueJs กัน

เวลาเราสร้าง web application ก็มักจะมีส่วนที่ใช้ร่วมกันได้ เช่น header paging และอื่น ๆ อีกมากมาย ตามเราออกแบบ ดังนั้น เราสามารถแยกส่วนที่ซ้ำ ๆ กันมาเป็น component ได้

ใน Vue เราสามารถสร้าง component แล้วเรียกใช้ได้ ตามตัวอย่าง

ก่อนอื่น เราก็ไป import เข้ามาในหน้าที่เราต้องการใช้ เช่น

import ChildComp from './ChildComp.vue'

จากนั้นเราก็ไปเรียกใช้ตามตัวอย่าง

<ChildComp />

ตัวอย่างแบบเต็ม

ตัวอย่างโค้ดในไฟล์ ChildComp.vue

<template>
  <h2>A Child Component!</h2>
</template>

จากนั้นตัวอย่างโค้ดในหน้า ที่เรียกใช้

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>