อัปเดตล่าสุด 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>
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!" แสดงบนหน้าเว็บเรียบร้อย
อ้างอิง