close

Components ใน Vue.js: การสร้าง การใช้ซ้ำ และการส่งผ่านข้อมูล

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

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

 

1. การสร้าง Components

Components components ใน Vue.js  สามารถสร้างได้โดยใช้เมธอด `Vue.component` หรือโดยการกำหนด single-file

 ตัวอย่าง:  

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. โครงสร้างส่วนประกอบ

คอมโพเนนต์ Vue ประกอบด้วยเทมเพลต สคริปต์ และสไตล์ที่เลือกได้ เทมเพลตประกอบด้วยมาร์กอัป HTML สคริปต์ประกอบด้วยตัวเลือกส่วนประกอบ(ข้อมูล วิธีการ คุณสมบัติที่คำนวณได้ ตะขอวงจรชีวิต) และสไตล์กำหนดลักษณะที่ปรากฏของส่วนประกอบ

ตัวอย่าง:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. การนำชิ้นส่วนกลับมาใช้ใหม่

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

ตัวอย่าง:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props อนุญาตให้คุณส่งผ่านข้อมูลจากพาเรนต์ ไป components ยังลูก มีการประกาศในองค์ประกอบย่อยและสามารถใช้งานได้เหมือนคุณสมบัติของข้อมูลทั่วไป components Props

ตัวอย่าง:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. เหตุการณ์ที่กำหนดเอง

Components components สามารถปล่อยเหตุการณ์ที่ กำหนด เองเพื่อสื่อสารกับผู้ปกครอง ผู้ปกครอง components สามารถฟังเหตุการณ์เหล่านี้และตอบสนองตามนั้น

ตัวอย่าง:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

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