Vue Component

   อัปเดตล่าสุด Feb. 11, 2024

บทเรียนนี้จะเป็นขั้นตอนในการสร้าง 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!" แสดงบนหน้าเว็บเรียบร้อย


อ้างอิง



คอร์สเรียนแนะนำ