Vue Academy · บทเรียน

การเขียนเรื่องราวของคอมโพเนนต์

รูปแบบ CSF3, default export (title, component), named exports ในฐานะเรื่องราว และ args

การเขียนเรื่องราวของคอมโพเนนต์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เรื่องราวอธิบายสถานะของคอมโพเนนต์

เรื่องราวจะบันทึกสถานะหนึ่งของคอมโพเนนต์ ซึ่งประกอบด้วยพร็อพส์และเนื้อหาชุดหนึ่งโดยเฉพาะ ปุ่มหนึ่งรายการอาจมีเรื่องราวแบบ Primary, Secondary และ Disabled Storybook จะเรนเดอร์แต่ละรายการเป็นตัวอย่างแยกกันที่เรียกดูได้

CSF3: รูปแบบสมัยใหม่

Storybook ใช้รูปแบบเรื่องราวของคอมโพเนนต์ 3 (CSF3) ไฟล์หนึ่งไฟล์มีเอ็กซ์พอร์ตเริ่มต้นหนึ่งรายการเพื่ออธิบายคอมโพเนนต์ และมีเอ็กซ์พอร์ตที่ตั้งชื่อแล้วสำหรับเรื่องราวแต่ละรายการ โดยเป็นออบเจ็กต์ JavaScript/TypeScript ธรรมดาที่มีโค้ดประกอบน้อยมาก

เอ็กซ์พอร์ตเริ่มต้น (เมทา)

เอ็กซ์พอร์ตเริ่มต้นคือออบเจ็กต์เมทา อย่างน้อยที่สุดจะมี title (เส้นทางในแถบด้านข้าง) และ component ที่กำลังจัดทำเอกสาร

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

title จัดระเบียบแถบด้านข้าง

title ใช้เครื่องหมายทับเพื่อสร้างลำดับชั้นของโฟลเดอร์ในแถบด้านข้างของ Storybook "Forms/Inputs/TextField" จะซ้อนกันลึกสามระดับ

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

เอ็กซ์พอร์ตที่ตั้งชื่อแล้วคือเรื่องราว

เอ็กซ์พอร์ตที่ตั้งชื่อแล้วแต่ละรายการคือรูปแบบหนึ่งของเรื่องราว ชื่อเอ็กซ์พอร์ตจะกลายเป็นป้ายชื่อเรื่องราวในแถบด้านข้าง

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

ออบเจ็กต์ args

ออบเจ็กต์ args ของเรื่องราวจะกำหนดค่าพร็อพส์ Storybook จะส่งค่าเหล่านี้ไปยังคอมโพเนนต์ และแผงควบคุมจะให้คุณปรับค่าแบบเรียลไทม์

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

สร้างรูปแบบต่าง ๆ หลายแบบด้วย args

นำคอมโพเนนต์เดิมกลับมาใช้ในเรื่องราวต่าง ๆ โดยเปลี่ยนเฉพาะ args แต่ละเอ็กซ์พอร์ตจะเรนเดอร์คอมโพเนนต์ด้วยพร็อพส์ที่แตกต่างกัน

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

กำหนด args เริ่มต้นในเมทา

ใส่ args ที่ใช้ร่วมกันไว้ในออบเจ็กต์เมทา แล้วให้เรื่องราวแต่ละรายการเขียนทับเฉพาะค่าที่แตกต่าง วิธีนี้ช่วยให้เรื่องราวเป็นไปตามหลัก DRY

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

เรื่องราวที่มีสล็อตด้วย render

สำหรับเนื้อหาที่ส่งผ่านสล็อต ให้ระบุฟังก์ชัน render ที่ส่งคืนเทมเพลตซึ่งใช้คอมโพเนนต์ วิธีนี้รองรับกรณีที่ไม่สามารถสื่อความหมายได้ด้วย args เพียงอย่างเดียว

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

สร้างเอกสารอัตโนมัติด้วย tags

เพิ่ม tags: ["autodocs"] ลงในเมทา เพื่อให้ Storybook สร้างหน้าเอกสารสำหรับคอมโพเนนต์โดยอัตโนมัติจากพร็อพส์และเรื่องราวของคอมโพเนนต์

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

autodocs สร้างอะไร

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับการเขียนเรื่องราว

ทบทวน

คุณได้เรียนรู้การเขียนเรื่องราวของคอมโพเนนต์:

เรื่องราวจะบันทึกสถานะหนึ่งของคอมโพเนนต์ และ CSF3 ใช้เอ็กซ์พอร์ตที่เป็นออบเจ็กต์
เอ็กซ์พอร์ตเริ่มต้นคือเมทาที่มี title (เส้นทางในแถบด้านข้าง) และ component
เอ็กซ์พอร์ตที่ตั้งชื่อแล้วแต่ละรายการคือรูปแบบหนึ่งของเรื่องราว และ args จะกำหนดค่าพร็อพส์
ใส่ args ที่ใช้ร่วมกันไว้ในเมทา แล้วให้เรื่องราวเขียนทับส่วนที่เหลือ ใช้ render สำหรับสล็อต
tags: ["autodocs"] จะสร้างหน้าเอกสารโดยอัตโนมัติ

คำถามที่พบบ่อย

บทเรียน “การเขียนเรื่องราวของคอมโพเนนต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเขียนเรื่องราวของคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนเรื่องราวของคอมโพเนนต์”

รูปแบบ CSF3, default export (title, component), named exports ในฐานะเรื่องราว และ args คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การเขียนเรื่องราวของคอมโพเนนต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่า Storybook สำหรับ Vue 3
การเขียนเรื่องราวของคอมโพเนนต์
Controls, Actions และ Args
ส่วนเสริม Storybook และการทดสอบการเข้าถึง

← กลับไปที่ Vue Academy