การสร้างและลงทะเบียนคอมโพเนนต์
กำหนดและลงทะเบียนคอมโพเนนต์ทั้งแบบทั่วทั้งแอปและแบบเฉพาะที่
การสร้างและลงทะเบียนคอมโพเนนต์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
ทำไมต้องใช้คอมโพเนนต์
คอมโพเนนต์ ช่วยให้คุณแบ่งส่วนติดต่อผู้ใช้ออกเป็นส่วนย่อยที่เป็นอิสระและนำกลับมาใช้ใหม่ได้
- แต่ละส่วนจัดการเทมเพลต ตรรกะ และสไตล์ของตนเอง
- คุณนำคอมโพเนนต์มาประกอบเป็นโครงสร้างที่ใหญ่ขึ้น
- ช่วยให้โค้ดเป็นระเบียบและดูแลรักษาได้ง่าย
คอมโพเนนต์แบบไฟล์เดียว
คอมโพเนนต์แบบไฟล์เดียว (.vue) รวมสามบล็อกไว้ในไฟล์เดียว
<template>
<p>{{ greeting }}</p>
</template>
<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>
<style scoped>
p { color: teal; }
</style>การกำหนดคอมโพเนนต์
บล็อก template คือมาร์กอัป บล็อก script เก็บตรรกะ และบล็อก style เก็บ CSS
- สไตล์แบบ scoped มีผลเฉพาะกับคอมโพเนนต์นี้
- เทมเพลตต้องมีโครงสร้างขององค์ประกอบที่ชัดเจน
ชื่อคอมโพเนนต์
ตามธรรมเนียม ไฟล์คอมโพเนนต์และการเรียกใช้จะใช้ PascalCase
- ไฟล์: UserCard.vue
- ในเทมเพลต: <UserCard />
- PascalCase ช่วยแยกคอมโพเนนต์ออกจาก HTML ดั้งเดิม
การนำเข้าคอมโพเนนต์
หากต้องการใช้คอมโพเนนต์ ให้นำเข้าคอมโพเนนต์นั้นในตำแหน่งที่ต้องการใช้
<script setup>
import UserCard from "./components/UserCard.vue"
</script>
<template>
<UserCard />
</template>การลงทะเบียนเฉพาะที่ (script setup)
เมื่อใช้ script setup เพียงนำเข้าคอมโพเนนต์ คอมโพเนนต์นั้นก็พร้อมใช้ในเทมเพลตแล้ว ไม่จำเป็นต้องลงทะเบียนเพิ่มเติม
<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>
<template>
<Header />
<main>Content</main>
<Footer />
</template>การลงทะเบียนเฉพาะที่ (Options API)
เมื่อใช้ Options API คุณจะลงทะเบียนคอมโพเนนต์ในตัวเลือก components
import UserCard from "./UserCard.vue"
export default {
components: {
UserCard
}
}
// Now <UserCard /> works in this templateการลงทะเบียนทั่วทั้งแอป
การลงทะเบียนทั่วทั้งแอป ด้วย app.component ทำให้สามารถใช้คอมโพเนนต์ได้ทุกที่โดยไม่ต้องนำเข้า
import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"
const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")แบบทั่วทั้งแอปกับแบบเฉพาะที่
การเลือกขอบเขตการลงทะเบียน
- ทั่วทั้งแอป สะดวก แต่ทำให้ชุดโปรแกรมใหญ่ขึ้นและติดตามการใช้งานได้ยากกว่า
- เฉพาะที่ มีการนำเข้าที่ชัดเจน ช่วยตัดโค้ดที่ไม่ใช้ได้ดีกว่า และทำให้เห็นการพึ่งพาได้ชัดเจนกว่า
ควรใช้การลงทะเบียนเฉพาะที่ ยกเว้นคอมโพเนนต์พื้นฐานไม่กี่ตัวที่ใช้ร่วมกันอย่างแท้จริงทั่วทั้งแอป
การนำคอมโพเนนต์กลับมาใช้ใหม่
คุณสามารถใช้คอมโพเนนต์เดิมได้หลายครั้ง แต่ละอินสแตนซ์ทำงานแยกจากกัน
<template>
<UserCard />
<UserCard />
<UserCard />
</template>
<!-- three separate instances,
each with its own state -->การซ้อนคอมโพเนนต์
คอมโพเนนต์รวมกันเป็นต้นไม้ คอมโพเนนต์แม่สามารถมีคอมโพเนนต์ลูก ซึ่งแต่ละคอมโพเนนต์ก็มีคอมโพเนนต์ลูกของตนเองได้
<!-- App.vue -->
<template>
<PageLayout>
<ArticleList />
</PageLayout>
</template>
<!-- ArticleList contains ArticleCard children -->ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับการลงทะเบียนคอมโพเนนต์
ทบทวน: การสร้างคอมโพเนนต์
คุณได้เรียนรู้การสร้างและลงทะเบียนคอมโพเนนต์
- ไฟล์ .vue เก็บ template, script และ style
- ใช้ชื่อแบบ PascalCase
- script setup ลงทะเบียนคอมโพเนนต์ที่นำเข้าโดยอัตโนมัติ
- Options API ใช้ตัวเลือก components
- app.component() ใช้ลงทะเบียนทั่วทั้งแอป
ถัดไป: พร็อพส์และเหตุการณ์แบบกำหนดเอง
คำถามที่พบบ่อย
บทเรียน “การสร้างและลงทะเบียนคอมโพเนนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างและลงทะเบียนคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างและลงทะเบียนคอมโพเนนต์”
กำหนดและลงทะเบียนคอมโพเนนต์ทั้งแบบทั่วทั้งแอปและแบบเฉพาะที่ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “การสร้างและลงทะเบียนคอมโพเนนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างและลงทะเบียนคอมโพเนนต์
- Props และเหตุการณ์แบบกำหนดเอง
- สล็อตและสล็อตแบบมีขอบเขต