รู้เบื้องต้นเกี่ยวกับส่วนประกอบ Vue

บทนำ

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

ในคำแนะนำนี้ เราจะมาดูกันว่าส่วนประกอบใน Vue คืออะไร ทำงานอย่างไร วิธีส่งข้อมูลและเหตุการณ์ผ่านส่วนประกอบเหล่านั้น และอื่นๆ อีกมากมาย

องค์ประกอบ Vue คืออะไร?

ส่วนประกอบ เป็นอินสแตนซ์ขององค์ประกอบ Vue ที่นำกลับมาใช้ใหม่ได้ ซึ่งรวมถึงเทมเพลต สไตล์ และองค์ประกอบ JavaScript แต่ละคอมโพเนนต์เป็น "ของตัวเอง" คล้ายกับการที่แต่ละองค์ประกอบ HTML เป็น "สิ่งที่เป็นของตนเอง" และทั้งคอมโพเนนต์ Vue และองค์ประกอบ HTML ช่วยให้เราสามารถใช้องค์ประกอบเหล่านี้เป็นหน่วยการสร้างสำหรับหน้าเว็บ

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

แอปพลิเคชัน Vue ทั่วไปประกอบด้วยส่วนประกอบมากมายที่สามารถนำมาใช้ซ้ำได้หลายครั้งตามต้องการ

ตัวอย่างเช่น เว็บไซต์ทั่วไปมีส่วนที่ปรากฏในทุกหน้า – แถบนำทาง ส่วนหัว ส่วนท้าย และอื่นๆ ดังนั้นจึงถือเป็นแนวปฏิบัติที่ดีที่จะทำให้แต่ละองค์ประกอบแยกจากกัน ด้วยวิธีนี้ เรากำลังสร้างโค้ดที่มีโครงสร้างดี อ่านได้ ใช้ซ้ำได้ และดูแลรักษาง่าย:

วิธีสร้างองค์ประกอบ Vue

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

สร้าง Vue Components ด้วยการตั้งค่า Build

โครงการส่วนใหญ่สร้างขึ้นโดยใช้ สร้างการตั้งค่าซึ่งทำให้เราสามารถสร้าง Single-File Components ได้ (SFC) – ไฟล์ส่วนประกอบเฉพาะที่มีไฟล์ .vue ส่วนขยาย. ซึ่งช่วยให้เราสรุปเทมเพลต ตรรกะ และสไตล์ของคอมโพเนนต์ Vue ได้ในไฟล์เดียว:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

สร้าง Vue Components โดยไม่ต้องตั้งค่า Build

หากคุณไม่สามารถใช้ตัวจัดการแพ็คเกจเช่น npm ในการติดตั้ง Vue บนเครื่องของคุณ คุณยังสามารถใช้ Vue ในแอปของคุณได้ ทางเลือกที่อาคาร Vue ใช้ npm คือการติดตั้ง Vue ผ่านไฟล์ CDN (เครือข่ายการจัดส่งเนื้อหา) โดยตรงในแอปของคุณ เรามาพูดถึงวิธีการสร้าง Vue Component นี้กันอย่างรวดเร็ว

การติดตั้ง Vue โดยไม่มี build จะทำให้เราสามารถใช้ฟังก์ชันเฉพาะของ Vue ได้เหมือนกับที่เราทำกับ JavaScript ธรรมดา ไวยากรณ์ค่อนข้างคล้ายกับที่เราเคยเห็นใน SFC ทั่วไป:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

ในคู่มือนี้ เราจะใช้ ไวยากรณ์ SFCเนื่องจากเป็นวิธีการสร้างส่วนประกอบที่ใช้บ่อยที่สุด

วิธีลงทะเบียนส่วนประกอบใน Vue

เราได้เห็นวิธีสร้างส่วนประกอบใน Vue แล้ว ขั้นตอนต่อไปคือการใช้ส่วนประกอบเหล่านี้ภายในส่วนประกอบอื่น (ลำดับชั้นพ่อแม่ลูก).

ในการทำเช่นนั้น เราต้องลงทะเบียนส่วนประกอบที่เราต้องการใช้ก่อน การลงทะเบียนนี้เกี่ยวข้องกับการนำเข้าและการลงทะเบียนส่วนประกอบ มีสองทางเลือกในการทำเช่นนั้น – ทั่วโลก และ ทะเบียนท้องถิ่น.

Vue Components – การลงทะเบียนทั่วโลก

คอมโพเนนต์ที่ลงทะเบียนทั่วโลกตามชื่อหมายถึงมีให้ใช้งานทั่วโลก ซึ่งหมายความว่าสามารถใช้ในคอมโพเนนต์ใดๆ ของแอปพลิเคชันของเราโดยที่เราไม่ต้องนำเข้าอีกครั้ง สิ่งนี้ทำได้โดยการลงทะเบียนส่วนประกอบโดยใช้ app.component() วิธี:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

ในสถานการณ์ที่เรามีส่วนประกอบมากมาย โซ่ พวกเขาด้วยวิธีนี้:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

หลังจากที่เราลงทะเบียนส่วนประกอบแล้ว เราสามารถใช้ส่วนประกอบเหล่านี้ในเทมเพลตของส่วนประกอบใดๆ ภายในแอปพลิเคชันนี้ได้โดยใช้ไวยากรณ์ต่อไปนี้:

<ChildComponent/>
<ProfileComponent/>

Vue Components – การลงทะเบียนท้องถิ่น

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

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

เมื่อตั้งชื่อส่วนประกอบให้ใช้ คาเมลเคส เพื่อให้ชัดเจนว่านี่คือองค์ประกอบ Vue แทนที่จะเป็นองค์ประกอบ HTML ดั้งเดิมในเทมเพลต นอกจากนี้ยังช่วยให้นำเข้าและลงทะเบียนส่วนประกอบใน JavaScript ได้ง่ายขึ้น

วิธีการส่งข้อมูลผ่านส่วนประกอบ Vue

ข้อดีอย่างหนึ่งของการสร้างคอมโพเนนต์คือความสามารถในการนำโค้ดกลับมาใช้ใหม่โดยทำให้เป็นโมดูล

สมมติว่าเรากำลังสร้างส่วนประกอบโปรไฟล์ของผู้ใช้ที่ต้องรับข้อมูลของนักเรียนแต่ละคนจากหน้าโปรไฟล์ ในกรณีนี้ เราจะต้องส่งข้อมูลนี้ลงมาจากส่วนประกอบของโปรไฟล์ (ส่วนประกอบหลัก) ไปยังส่วนประกอบของโปรไฟล์ผู้ใช้ (ส่วนประกอบย่อย) และเราจะใช้อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก

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

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

สล็อต

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

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

จากนั้นเราสามารถใช้ส่วนประกอบนี้ได้ทุกที่ที่เราต้องการและให้เนื้อหาที่เราต้องการ การไม่ให้เนื้อหาหมายความว่าจะใช้ค่าเริ่มต้นที่เราให้ไว้ (คลิกฉัน):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

วิธีปล่อยเหตุการณ์จาก Vue Components

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

สมมติว่าเรามีองค์ประกอบหลัก (App.vue) ที่มีส่วนประกอบลูกเดียว (MyBlogPost.vue). นอกจากนี้ คอมโพเนนต์ลูกยังมีปุ่มที่ควรเปลี่ยนชื่อ

สมมติว่าเราต้องการเปลี่ยนชื่อหน้าของเราเมื่อคลิกปุ่ม เพื่อให้ฟังก์ชันทำงาน:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

และองค์ประกอบลูกจะมีลักษณะดังนี้:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

สรุป

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

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://stackabuse.com/introduction-to-vue-components/