Vue Component

บทเรียนนี้จะเป็นขั้นตอนในการสร้าง Component แรกใน Vue.js 3 ซึ่ง Component นั้น ก็ตรงตามตัวเลยครับความหมาย เป็นการแบ่งส่วนประกอบของหน้าเว็บไซต์ให้มีโครงสร้างที่ชัดเจนและสามารถนำกลับมาใช้ใหม่ (Re-use) ได้ง่าย เราสามารถสร้างไว้หลาย ๆ คอมโพเนนต์ เมื่อต้องการเรียกใช้ส่วนไหนในหน้าเว็บ ก็สามารถอิมพอร์ตเข้าไปใช้งานได้ทันที

โครงสร้างโปรเจกต์ Vue.js 

• ภายในโฟลเดอร์  sonny-app ให้ลบโค้ดในไฟล์ components/HelloWorld.vue และ  main.js ที่เป็น default ออกให้หมด (จะทำการเขียนขึ้นมาใหม่)
• สร้างไฟล์ใหม่ชื่อ  HelloWorld.vue ภายในโฟลเดอร์  components
• สร้างไฟล์ใหม่ชื่อ  App.vue ในโฟลเดอร์หลัก

sonny-app/
├── components/
│   └── HelloWorld.vue
├── App.vue
└── package.json

โครงสร้างในตอนนี้

2. สร้างคอมโพเนนต์แรก (ไฟล์ชื่อ HelloWorld.vue)

ให้ทำการเพิ่มโค้ดด้านล่างลงในไฟล์  components/HelloWorld.vue  ซึ่งเป็นการกำหนดส่วนแสดงผล (template) และส่วนเขียนลอจิก (script) ของคอมโพเนนต์

<template>
  <div>
    <h1>สวัสดี, {{ name }}!</h1>
    <p>This is a Vue 3 component.</p>
  </div>
</template>

<script setup>
defineProps({
  name: String, // กำหนด prop ชื่อ name เป็น string
});
</script>

วิธีส่ง Props เข้าไปใน Vue Component

3. ใช้คอมโพเนนต์ในหน้าหลัก (App.vue)

• เปิดไฟล์  App.vue
• เพิ่มแท็ก  <HelloWorld... /> ใน template เพื่อเรียกใช้คอมโพเนนต์ และส่ง prop  name ไปด้วย (โดยทดสอบ placeholder เป็นชื่อ Sonny ไปก่อน เดี๋ยวจะมา implement เพิ่มเติมในภายหลัง)

<template>
  <div id="app">
    <HelloWorld name="Sonny" />
  </div>
</template>

<script setup>
</script>

4. รันโปรเจกต์

ใช้คำสั่ง  npm run dev เพื่อรันเว็บเซิร์ฟเวอร์

$ npm run dev

จากนั้นเปิดเว็บเบราว์เซอร์ไปที่ http://localhost:8080 จะเห็นข้อความ "สวัสดี, Sonny!" แสดงบนหน้าเว็บเรียบร้อย

อ้างอิง

• Vue Component by vue.org