Vue.js คือ ตอนที่ 5 : คอมโพเนนต์ (Components)

19พ.ค. 2023 by รับทำแอพ สบายไอที

ส่วนประกอบพื้นฐาน: Props เหตุการณ์ (Events) สล็อต (Slots)
การสื่อสารส่วนประกอบ (Component): ส่วนประกอบ Parent-Child และ Sibling
การลงทะเบียนส่วนประกอบ: Global และ Local
ไดนามิก (Dynamic) และส่วนประกอบ Async
แนวคิดส่วนประกอบขั้นสูง (Advanced Component Concepts)

ในโลกของ Vue.js ส่วนประกอบคือองค์ประกอบสำคัญของแอปพลิเคชันหรือเว็บไซต์ของคุณ เป็นอินสแตนซ์ที่ใช้ซ้ำได้ด้วยชื่อ เทมเพลต สคริปต์ และสไตล์ของตนเอง ที่สามารถกำหนดองค์ประกอบแบบกำหนดเองและนำมารวมกันเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน คำแนะนำเชิงลึกนี้จะแนะนำคุณเกี่ยวกับองค์ประกอบสำคัญของ Vue.js

ก่อนที่เราจะเจาะลึก สิ่งสำคัญคือต้องทราบว่ารากฐานที่มั่นคงใน Vue.js มีความสำคัญต่อการทำความเข้าใจองค์ประกอบต่างๆ หากคุณเพิ่งเริ่มใช้ Vue.js ลองกลับไปที่หน้าหลักของเราที่ทำเว็บ Vue.js และทำแอพ เพื่อเสริมความรู้ของคุณ

1. ส่วนประกอบพื้นฐาน: Props เหตุการณ์ (Events) สล็อต (Slots)

คอมโพเนนต์เป็นส่วนแยกและนำมาใช้ซ้ำได้ของแอปพลิเคชัน Vue.js ของคุณ เช่นเดียวกับฟังก์ชันใน JavaScript ช่วยรักษาฐานโค้ดขนาดใหญ่ และทำให้การพัฒนา อัปเดต และอ่านโค้ดของคุณง่ายขึ้น

Props : ย่อมาจากคุณสมบัติ (properties) Props ช่วยให้คุณสามารถส่งผ่านข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อย Props แต่ละชิ้นเป็นแอตทริบิวต์ขององค์ประกอบองค์ประกอบและสามารถเป็น JavaScript ประเภทใดก็ได้ – สตริง, ตัวเลข, อาร์เรย์, วัตถุหรือแม้แต่ฟังก์ชัน นี่คือตัวอย่างง่ายๆ:

Vue.component('child-component', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

ในตัวอย่างนี้ messageprop จะถูกส่งผ่านจากส่วนประกอบหลักไปยัง child-component และใช้ภายในแม่แบบ

เหตุการณ์ (Events) : เหตุการณ์จัดเตรียมวิธีสำหรับส่วนประกอบย่อยในการสื่อสารกลับไปยังส่วนประกอบหลัก คอมโพเนนต์ลูกสามารถส่งเหตุการณ์ และพาเรนต์สามารถฟังเหตุการณ์นั้นและตอบสนองตามนั้น ระบบเหตุการณ์ที่กำหนดเองของ Vue ใช้ v-on สำหรับการฟังเหตุการณ์และ $emit การปล่อยเหตุการณ์

Vue.component('child-component', {
  methods: {
    notifyParent: function() {
      this.$emit('notify');
    }
  }
});

ในข้อมูลโค้ดนี้ child-component ปล่อยเหตุการณ์ ‘notify’ ที่คอมโพเนนต์หลักสามารถรับฟังและตอบกลับได้

Slots : Slots ช่วยให้คุณสามารถเขียนส่วนประกอบที่ยืดหยุ่นและใช้ซ้ำได้โดยการรวม HTML/มาร์กอัปไว้ระหว่างแท็กส่วนประกอบ เนื้อหานี้สามารถส่งออกภายในเทมเพลตของคอมโพเนนต์

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <slot></slot>
    </div>
  `
});

ในคอมโพเนนต์นี้ อะไรก็ตามที่อยู่ระหว่างแท็กเปิดและ alert-box แท็กปิดเมื่อคอมโพเนนต์ถูกใช้งาน จะถูกส่งออกแทนที่ <slot></slot> ในเทมเพลตของคอมโพเนนต์

2. การสื่อสารส่วนประกอบ (Component): ส่วนประกอบ Parent-Child และ Sibling

ส่วนประกอบต่างๆ มักจะต้องสื่อสารระหว่างกัน โดยเฉพาะในแอปพลิเคชันขนาดใหญ่ ดังที่เราได้เห็นก่อนหน้านี้ ส่วนประกอบ Parent และ Child สามารถสื่อสารผ่าน Props และเหตุการณ์ (Events) ต่างๆ แต่สิ่งที่เกี่ยวกับส่วนประกอบ Sibling? พวกเขาไม่สามารถส่ง Props หรือส่งเหตุการณ์ให้กันและกันได้โดยตรง

สำหรับกรณีง่ายๆ คุณสามารถใช้พาเรนต์ทั่วไปเป็นตัวกลางได้ Parent สามารถฟังเหตุการณ์ที่ส่งโดย Child จากนั้นใช้ข้อมูลนั้นเพื่อส่ง Props ไปยัง Child อื่น

สำหรับกรณีที่ซับซ้อนมากขึ้น คุณสามารถใช้ที่จัดเก็บการจัดการสถานะแบบรวมศูนย์ เช่น Vuex เพื่ออำนวยความสะดวกในการสื่อสารระหว่างคอมโพเนนต์ที่ไม่เกี่ยวข้อง ส่วนประกอบสามารถยอมรับการเปลี่ยนแปลงในร้านค้าหรือตอบสนองต่อการเปลี่ยนแปลงในร้านค้า เราจะสำรวจเรื่องนี้เพิ่มเติมในคู่มือ ทำเว็บ Vue.js และทำแอพ

3. การลงทะเบียนส่วนประกอบ: Global และ Local

คอมโพเนนต์สามารถลงทะเบียนได้ Global หรือ Local ซึ่งส่งผลต่อความพร้อมใช้งานตลอดทั้งแอปพลิเคชันของคุณ

การลงทะเบียนส่วนกลาง (Global) : ส่วนประกอบส่วนกลางสามารถใช้ในเทมเพลตของอินสแตนซ์ Vue (อินสแตนซ์รูท) หรือส่วนประกอบในแอปพลิเคชัน Vue เดียวกัน:

Vue.component('my-component', {
  // options...
});

การลงทะเบียนแบบ Local : คอมโพเนนต์ที่ลงทะเบียนแบบโลคัลจะพร้อมใช้งานภายในขอบเขตของคอมโพเนนต์ที่ลงทะเบียนเท่านั้น ซึ่งมีประโยชน์สำหรับการห่อหุ้ม โดยเฉพาะอย่างยิ่งเมื่อสร้างคอมโพเนนต์ที่ใช้เฉพาะในส่วนใดส่วนหนึ่งของแอปพลิเคชันของคุณ

ต่อไปนี้คือตัวอย่างพื้นฐานของการลงทะเบียนส่วนประกอบในเครื่อง:

var ChildComponent = {
  // options...
}

new Vue({
  // ...
  components: {
    'my-component': ChildComponent
  }
});

ในตัวอย่างนี้ ‘my-component’ มีให้ใช้งานในเทมเพลตของอินสแตนซ์ Vue นี้เท่านั้น วิธีการนี้มักเป็นที่ต้องการมากกว่าสำหรับแอปพลิเคชันขนาดใหญ่ที่มีส่วนประกอบจำนวนมาก เนื่องจากช่วยให้จัดระเบียบและสรุปรหัสได้อย่างมีประสิทธิภาพมากขึ้น

4. ไดนามิก (Dynamic) และส่วนประกอบ Async

Vue.js ยังให้ส่วนประกอบแบบไดนามิกและ async แก่เรา ส่วนประกอบไดนามิกช่วยให้คุณสลับไปมาระหว่างส่วนประกอบต่างๆ โดยใช้จุดเชื่อมต่อเดียวกัน ในขณะที่ส่วนประกอบ async ช่วยรักษาประสิทธิภาพของแอปพลิเคชันโดยอนุญาตให้คุณโหลดส่วนประกอบเมื่อจำเป็นเท่านั้น

ส่วนประกอบแบบไดนามิก : คุณสามารถใช้องค์ประกอบในตัว <component> และผูก is แอตทริบิวต์แบบไดนามิกเพื่อเปลี่ยนองค์ประกอบที่จะแสดงผล:

<component v-bind:is="currentView"></component>

ในกรณีนี้ currentView เป็นคุณสมบัติข้อมูลของคอมโพเนนต์ของคุณที่สามารถเปลี่ยนแปลงเพื่อแสดงคอมโพเนนต์ต่างๆ ที่จุดต่อเชื่อมเดียวกันได้

ส่วนประกอบ Async : ส่วนประกอบ Async ถูกกำหนดเป็นฟังก์ชันโรงงานที่ส่งคืน Promise สิ่งนี้มีประโยชน์เมื่อคุณต้องการโหลดส่วนประกอบเฉพาะเมื่อจำเป็นเท่านั้น เช่น สำหรับการแยกโค้ดในแอปพลิเคชันขนาดใหญ่:

Vue.component('async-component', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am an async component!</div>'
    })
  }, 1000)
});

ในตัวอย่างนี้ ‘async-component’ จะถูกดึงข้อมูลและแก้ไขแบบอะซิงโครนัส สิ่งนี้สามารถปรับปรุงเวลาโหลดเริ่มต้นของแอปพลิเคชันหรือเว็บไซต์ของคุณได้อย่างมาก

5. แนวคิดส่วนประกอบขั้นสูง (Advanced Component Concepts)

แม้ว่าแนวคิดที่กล่าวถึงข้างต้นเป็นแกนหลักของการทำงานกับส่วนประกอบใน Vue.js แต่ก็มีแนวคิดขั้นสูงบางอย่างที่คุณสามารถใช้ประโยชน์เพื่อทำให้ส่วนประกอบของคุณมีประสิทธิภาพและยืดหยุ่นยิ่งขึ้น

มิกซ์อิน (Mixins) : มิกซ์อินเป็นวิธีที่ยืดหยุ่นในการแจกจ่ายฟังก์ชันที่ใช้ซ้ำได้สำหรับคอมโพเนนต์ของ Vue วัตถุผสมสามารถมีตัวเลือกส่วนประกอบใดๆ เมื่อคอมโพเนนต์ใช้มิกซ์อิน ตัวเลือกทั้งหมดในมิกซ์อินจะถูก “mixed” เข้ากับตัวเลือกของคอมโพเนนต์เอง:

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('Hello from mixin!')
    }
  }
}

var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // Logs "Hello from mixin!" when created

คำสั่งที่กำหนดเอง (Custom Directives) : Vue ให้คุณลงทะเบียนคำสั่งที่กำหนดเองของคุณเอง สิ่งนี้มีประโยชน์เมื่อคุณต้องการสร้างฟังก์ชันที่ใช้ซ้ำได้ซึ่งไม่เหมาะกับส่วนประกอบ:

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
});

ในกรณีนี้ เราสร้างคำสั่งแบบกำหนดเองv-focusที่จะโฟกัสองค์ประกอบเมื่อแทรกลงใน DOM

ฟังก์ชัน Render และ JSX : Vue.js ยังสนับสนุนการใช้ฟังก์ชันการเรนเดอร์และ JSX ทำให้คุณสามารถเขียนส่วนประกอบที่มีความยืดหยุ่นสูงและใช้ประโยชน์จาก JavaScript ได้อย่างเต็มที่ภายในเทมเพลตของคุณ:

Vue.component('jsx-component', {
  render(h) {
    return <div>Hello, JSX!</div>
  }
});

ฟังก์ชัน Render ได้รับอาร์กิวเมนต์ของฟังก์ชัน h ที่คุณสามารถใช้เพื่อสร้าง VNodes

การเรียนรู้ส่วนประกอบใน Vue.js เป็นสิ่งสำคัญสำหรับการสร้างฟังก์ชันที่มีประสิทธิภาพและใช้ซ้ำได้ในแอปพลิเคชันหรือเว็บไซต์ Vue.js ของคุณ ไม่ว่าคุณจะทำเว็บ Vue.js และทำแอพ ความเข้าใจอย่างลึกซึ้งเกี่ยวกับส่วนประกอบและวงจรชีวิตของ Vue.js วิธีการสื่อสาร ประเภทการลงทะเบียน และ แนวคิดขั้นสูงจะช่วยให้คุณมีเครื่องมือที่จำเป็นในการสร้างโครงการที่มีประสิทธิภาพและบำรุงรักษาได้

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

ระบบนิเวศ Vue.js มีเครื่องมือและไลบรารีมากมายเพื่อให้การทำงานกับส่วนประกอบมีความยืดหยุ่นและมีประสิทธิภาพยิ่งขึ้น ตัวอย่างเช่น Vue Router ช่วยให้คุณสามารถแมปส่วนประกอบกับเส้นทางต่างๆ และ Vuex เปิดใช้งานการจัดการสถานะส่วนกลางด้วยส่วนประกอบ Vue เครื่องมือเหล่านี้ทำให้การเดินทางของคุณในการทำเว็บ Vue.js และทำแอพ ให้ผลตอบแทนและประสิทธิผลมากยิ่งขึ้น

การสำรวจหัวข้อขั้นสูงเหล่านี้ในคอมโพเนนต์ – มิกซ์อิน ไดเร็กทีฟแบบกำหนดเอง ฟังก์ชันการเรนเดอร์ JSX ไดนามิกและอะซิงค์ คอมโพเนนต์ – จะทำให้คุณแตกต่างจากนักพัฒนา Vue.js พลังและความยืดหยุ่นที่นำเสนอสามารถช่วยคุณรับมือกับความท้าทายที่หลากหลายเมื่อสร้างแอปพลิเคชันที่ซับซ้อน

สิ่งสำคัญเท่ากับการทำความเข้าใจแนวคิดเหล่านี้คือการฝึกฝน ตรวจสอบให้แน่ใจว่าได้ใช้แนวคิดเหล่านี้ในโครงการในโลกแห่งความเป็นจริง สร้างส่วนประกอบต่างๆ ลองส่ง Props ปล่อยเหตุการณ์ ใช้สล็อต (Slots) ลงทะเบียนส่วนประกอบทั้งแบบโลคัลและโกลบอล และอย่าลืมเล่นกับคอมโพเนนต์ไดนามิกและอะซิงค์

โปรดจำไว้เสมอว่าเป้าหมายคือการสร้างส่วนประกอบที่แยกส่วน ใช้ซ้ำได้ และบำรุงรักษาได้ ระบบส่วนประกอบ Vue.js ได้รับการออกแบบโดยคำนึงถึงเป้าหมายนี้ การปฏิบัติตามหลักการเหล่านี้ไม่เพียงแต่จะช่วยคุณในการทำเว็บ Vue.js และทำแอพ แต่ยังรวมถึงแอปพลิเคชันด้านสถาปัตยกรรมที่ทนทานต่อกาลเวลาอีกด้วย

เริ่มสร้างส่วนประกอบของคุณ และที่สำคัญที่สุดคือ สนุกกับกระบวนการนี้ Vue.js เป็นเฟรมเวิร์กที่ทรงพลังแต่ตรงไปตรงมา และด้วยหลักการเหล่านี้ภายใต้การควบคุมของคุณ คุณจะสร้างอะไรได้ไม่จำกัด

1. ส่วนประกอบพื้นฐาน: Props เหตุการณ์ (Events) สล็อต (Slots)

2. การสื่อสารส่วนประกอบ (Component): ส่วนประกอบ Parent-Child และ Sibling

3. การลงทะเบียนส่วนประกอบ: Global และ Local

4. ไดนามิก (Dynamic) และส่วนประกอบ Async

5. แนวคิดส่วนประกอบขั้นสูง (Advanced Component Concepts)

Vue.js คืออะไร

Vue.js คือ ตอนที่ 4 : เทมเพลต (Templates)

Vue.js คือ ตอนที่ 6 : แนวคิดขั้นสูง (Advanced Concepts)