เนื้อหาตอนต่อไปนี้ เราจะมาพูดถึงเกี่ยวกับ component ซึ่งตลอดเนื้อหา
ผ่านๆ มาเราใช้ component เพียงอันเดียวสำหรับประกอบคำอธิบาย และ
แนะนำการใช้งานต่างๆ ดูรูปโครงสร้างไฟล์หลักๆ ของโปรเจ็กต์ที่เราใช้งาน
(* ไม่รวมไฟล์ .gitignore ทบทวนที่บทความ http://niik.in/1083)
ไฟล์ App.vue คือไฟล์ single-file component ขอเรียกย่อเป็น SFC ที่เป็นเสมือน
root component ในโปรเจ็กต์ของเรามาเรื่อยมา ต่อไป ถ้าเราต้องการเพิ่ม components
ใดๆ เข้ามา เราจะเก็บไว้ในโฟลเดอร์ src > components
Components ใน vuejs คืออะไร
ใน Vue.js, "components" (คอมโพเนนท์) เป็นส่วนหนึ่งของโค้ดที่สามารถนำมา
ใช้ซ้ำได้และมักจะแยกออกเป็นชิ้นส่วนย่อยๆ เพื่อช่วยในการจัดการและสร้างส่วนต่างๆ
ของ UI (User Interface) ของแอปพลิเคชัน โดยคอมโพเนนท์ใน Vue.js จะมีการ
ประกาศขึ้นมาเป็น Vue component ซึ่งสามารถมีทั้ง HTML, CSS และ JavaScript
รวมกันอยู่ในไฟล์เดียว ทำให้สามารถจัดการโค้ดได้ง่ายขึ้น
ดูรูปภาพประกอบการอธิบาย component
การสร้าง component ทำให้เราสามารถแยกองค์ประกอบของ UI ออกเป็นส่วนย่อยต่างๆ เป็น
อิสระและสามารถนำกลับมาใช้งานได้ อย่างเข่น ส่วนของ footer header หรือ ส่วนของ side
menu เหล่านี้เป็นต้น เราทำการแยกแต่ละส่วน แล้วนำมาประกอบกันเป็น UI ที่สมบูรณ์เพื่อใช้งาน
รูปแบบโครงสร้างๆ ก็จะคล้ายๆ กับโครงสร้าง HTML ที่ประกอบด้วย element ต่างๆ มารวมกัน
แต่สำหรับ vuejs ก็จะแตกต่างไป ที่เราสามารถกำหนดรูปแบบและการทำงาน ตามที่เราต้องการได้
การกำหนด Component
การสร้างคอมโพเนนท์อย่างง่ายโดยทั่วไปแล้วในรูปแบบโปรเจ็กต์ที่เราใช้งานการ build นี้ เราก็จะใช้
รูปแบบไฟล์ที่มีนามสกุลเป็น .vue หรือที่เรียกว่า Single-File Component และการกำหนด
ชื่อของไฟล์ก็มีส่วนสำคัญในการนำไปใช้งาน โดยให้ใช้เป็นรูปแบบ อักษรตัวใหญ่ตัวแรกทุกๆคำในชื่อ
ไฟล์ เรียกรูปแบบนี้ว่า PascalCase เช่น คำว่า helloworld ก็จะใช้เป็น HelloWorld.vue
หรือ welcomeitem ก็จะใช้เป็น WelcomeItem.vue แนวทางประมาณนี้เป็นตัน ตัวอย่าง
นี้เราจะสร้าง component ไฟล์ชื่อ ButtonCounter.vue ไว้ใน src > components ดังนี้
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">
You clicked me {{ count }} times.
</button>
</template>
เป็นคอมโพเนนท์เบื้องต้นที่มีปุ่ม ที่ทำการนับจำนวนครั้งที่คลิก
การนำ Component ไปใช้งาน
ทุกๆ คอมโพเนนท์ที่เราสร้างขึ้นที่ไม่ใช่ root เราจะเรียกว่า child คอมโพเนนท์ และ หากต้องการ
นำ child คอมโพเนนท์ที่เราสร้างขึ้นไปใช้งาน เราก็ต้องทำการ import ไปใน parent
คอมโพเนนท์ หรือก็คือ นำคอมโพเนนท์ลูกไปแสดงในคอมโพเนนท์แม่ ในที่นี้ parent ของเราก็
คือไฟล์ App.vue เราก็จะกำหนดเป็นดังนี้
<script setup> import ButtonCounter from './components/ButtonCounter.vue' </script> <template> <h1>Here is a child component!</h1> <ButtonCounter /> </template>
จะเห็นว่าเป็นการใช้งานที่ง่ายและไม่ยุ่งยาก เมื่อต้องการนำ ButtonCounter เข้ามาใช้งานก็
เพียงทำการระบุชื่อ ไฟล์คอมโพเนนท์นั้น และระบุ path ไฟล์ให้ถูกต้อง
import ButtonCounter from './components/ButtonCounter.vue'
การ import ในลักษณะนี้เรียกว่า Local Registration นั่นคือ คอมโพเนนท์ที่นำเข้ามา
ใช้งาน จะสามารถใช้ได้เฉพาะในคอมโพเนนท์นี้เท่านั้น และเราสามารถเรียกใช้ใน template
ได้ทั้งรูปแบบ PascalCase tags และ kebab-case tags
- PascalCase tags จะใช้เป็น <ButtonCounter />
- kebab-case tags จะใช้เป็น <button-counter />
* แต่กรณีที่เราไม่ได้ใช้แบบ SFC หรือมีการนำคอมโพเนนท์ไปใช้ใน HTML โดยตรง เราจะต้อง
ใช้รูปแบบ kebab-case เท่านั้น เพื่อให้ตัวจัดการ HTML ของบราวเซอร์ทำงานแปลงรูปแบบได้
ในที่นี้เราใช้เป็น SFC จึงสามารถใช้ได้ทั้งสองรูปแบบ แต่แนะนำเป็น PascalCase เป็นหลัก
จากนั้นเรียกใช้งานในส่วนของ template
<template> <h1>Here is a child component!</h1> <ButtonCounter /> </template>
ผลลัพธ์ที่ได้
เมื่อเราคลิกที่ปุ่มก็จะทำการเพิ่มการนับเข้าไปเรื่อยๆ
คล้ายๆ กับเราได้สร้างรูปแบบแท็กแบบกำหนดเองเข้ามาใช้งาน สังเกตว่าการใช้งานรูปแบบ
PascalCase ทำให้เราสามารถแยกได้ชัดเจนระหว่าง Vue component กับ Native
HTML element
การใช้งาน Component ซ้ำ
ตามที่ได้อธิบายไปในตอนต้นว่า เราสามารถใช้คอมโพเนนท์ซ้ำกี่ครั้งก็ได้ตามต้องการ ดูตัวอย่าง
กรณีเราใช้ ButtonCounter ซ้ำๆ หลายๆ อัน ในตัวอย่างคือ 4 อันและใช้รูปแบบการเขียน
ที่แตกต่างกัน
<script setup> import ButtonCounter from './components/ButtonCounter.vue' </script> <template> <h1>Here are many child components!</h1> <ButtonCounter /> <ButtonCounter></ButtonCounter> <button-counter /> <button-counter></button-counter> </template>
ผลลัพธ์ที่ได้
แต่ละปุ่มที่เราสร้างจากคอมโพเนนท์จะเป็นอิสระต่อกัน ตัวแปร count หรือ state ของแต่ละ
อันจะเป็นอิสระเป็นค่าของคอมโพเนนท์นั้น นั่นคือ ทุกๆ ครั้งมีการใช้งานคอมโพเนนท์ จะมีการ
สร้าง instance หรือตัวแทนของตัวมันเองแยกกัน
เนื้อหาเบื้องต้นตอนที่ 1 เกี่ยวกับคอมโพเนนท์ก็จะประมาณนี้ เพื่อไม่ให้ยาวเกินไป เราได้รู้จัก
คอมโพเนนท์ และการใช้งาน ซึ่งค่อนข้างจะง่าย ไม่ซับซ้อนอะไร แต่ก็ยังมีส่วนอื่นเกี่ยวกับ
คอมโพเนนท์ที่เราสร้าง ที่ต้องกำหนดเพิ่มเติม ดูต่อในตอนหน้าตอนที่ 2 รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง