Components เป็นแนวคิดที่สำคัญใน Vue.js ที่ช่วยให้คุณสร้างเว็บแอปพลิเคชันที่มีโครงสร้างและบำรุงรักษาได้ ด้วย components คุณสามารถแบ่งแอปพลิเคชันของคุณออกเป็นส่วนเล็กๆ ที่มีในตัวเอง โดยแต่ละส่วนจะรับผิดชอบส่วนเฉพาะของอินเทอร์เฟซผู้ใช้
ในบทความนี้ เราจะสำรวจวิธีสร้าง components ใน Vue.js ใช้รหัสซ้ำ และส่งข้อมูลระหว่าง components. เราจะเจาะลึกการใช้ props เพื่อส่งผ่านข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อย และการใช้เหตุการณ์เพื่อส่งผ่านข้อมูลจากองค์ประกอบย่อยสำรองไปยังองค์ประกอบหลัก
1. การสร้าง Components
Components components ใน Vue.js สามารถสร้างได้โดยใช้เมธอด `Vue.component` หรือโดยการกำหนด single-file
ตัวอย่าง:
2. โครงสร้างส่วนประกอบ
คอมโพเนนต์ Vue ประกอบด้วยเทมเพลต สคริปต์ และสไตล์ที่เลือกได้ เทมเพลตประกอบด้วยมาร์กอัป HTML สคริปต์ประกอบด้วยตัวเลือกส่วนประกอบ(ข้อมูล วิธีการ คุณสมบัติที่คำนวณได้ ตะขอวงจรชีวิต) และสไตล์กำหนดลักษณะที่ปรากฏของส่วนประกอบ
ตัวอย่าง:
3. การนำชิ้นส่วนกลับมาใช้ใหม่
Components ใน Vue.js สามารถนำมาใช้ซ้ำได้ทั่วทั้งแอปพลิเคชันของคุณ ลดความซ้ำซ้อนของรหัสและปรับปรุงความสามารถในการบำรุงรักษา พวกเขาส่งเสริมวิธีการแบบแยกส่วน ช่วยให้คุณสามารถจัดองค์ประกอบให้เล็กลง components ให้ใหญ่ขึ้นได้
ตัวอย่าง:
4. Props
Props อนุญาตให้คุณส่งผ่านข้อมูลจากพาเรนต์ ไป components ยังลูก มีการประกาศในองค์ประกอบย่อยและสามารถใช้งานได้เหมือนคุณสมบัติของข้อมูลทั่วไป components Props
ตัวอย่าง:
5. เหตุการณ์ที่กำหนดเอง
Components components สามารถปล่อยเหตุการณ์ที่ กำหนด เองเพื่อสื่อสารกับผู้ปกครอง ผู้ปกครอง components สามารถฟังเหตุการณ์เหล่านี้และตอบสนองตามนั้น
ตัวอย่าง:
ตัวอย่างเหล่านี้แสดงแนวคิดหลักของ Vue.js components ซึ่งแสดงให้เห็นถึงความยืดหยุ่น การใช้ซ้ำ และความสามารถในการสื่อสาร Components ช่วยสร้างโค้ดโมดูลาร์และบำรุงรักษาได้ ทำให้ Vue.js เป็นเฟรมเวิร์กที่ทรงพลังสำหรับการสร้างแอปพลิเคชันที่ปรับขนาดได้