v-model: กลไกภายในของการผูกข้อมูลสองทาง
v-model คอมไพล์เป็น :modelValue + @update:modelValue ชื่อ v-model แบบกำหนดเอง และ v-model บนคอมโพเนนต์
v-model: กลไกภายในของการผูกข้อมูลสองทาง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
v-model คืออะไรกันแน่
v-model ดูเหมือนการผูกข้อมูลสองทางที่ทำงานอย่างมหัศจรรย์ แต่จริง ๆ แล้วเป็นเพียงรูปย่อของการผูกค่าร่วมกับตัวรับฟังเหตุการณ์ เมื่อเข้าใจว่ามันขยายออกมาอย่างไร คุณก็จะใช้กับทั้งอินพุตและคอมโพเนนต์แบบกำหนดเองได้
v-model กับอินพุตข้อความ
บนอินพุตแบบเนทีฟ v-model จะผูกค่าและรับฟังเหตุการณ์ input สองบรรทัดนี้ให้ผลลัพธ์เหมือนกัน
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />สองส่วนสำคัญ: ผูกค่าและรับฟัง
:value ส่งสถานะเข้าไปในองค์ประกอบ ส่วน @input ส่งการเปลี่ยนแปลงจากผู้ใช้กลับเข้าสู่สถานะ ทั้งสองส่วนทำงานร่วมกันจนเกิดผลลัพธ์แบบสองทาง
v-model บนคอมโพเนนต์แตกต่างกัน
ในคอมโพเนนต์แบบกำหนดเอง v-model จะใช้พร็อพและเหตุการณ์ที่แตกต่างกัน ได้แก่ modelValue และ update:modelValue ส่วน value/input แบบเนทีฟใช้ได้เฉพาะกับองค์ประกอบเนทีฟเท่านั้น
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />การใช้งาน v-model ในคอมโพเนนต์ลูก
เพื่อรองรับ v-model คอมโพเนนต์ลูกจะประกาศพร็อพ modelValue และส่งเหตุการณ์ update:modelValue เมื่อค่าควรเปลี่ยนแปลง
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>แม่แบบของคอมโพเนนต์ลูก
คอมโพเนนต์ลูกผูกพร็อพที่รับเข้ากับช่องป้อนข้อมูลและส่งเหตุการณ์เมื่อมีการเปลี่ยนแปลง คอมโพเนนต์แม่ไม่จำเป็นต้องทราบรายละเอียดภายใน
<template>
<input :value="modelValue" @input="onInput" />
</template>อาร์กิวเมนต์แบบระบุชื่อของ v-model
คุณสามารถกำหนดเป้าหมายให้พร็อพเฉพาะรายการได้ด้วยการตั้งชื่อโมเดล: v-model:title จะใช้พร็อพ title และเหตุการณ์ update:title
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />การประกาศโมเดลแบบระบุชื่อในคอมโพเนนต์ลูก
คอมโพเนนต์ลูกเพียงประกาศพร็อพและเหตุการณ์ที่มีชื่อตรงกัน
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>v-model หลายรายการในคอมโพเนนต์เดียว
เนื่องจากแต่ละโมเดลมีชื่อของตัวเอง คุณจึงผูกข้อมูลหลายรายการพร้อมกันได้ ตัวอย่างเช่น คอมโพเนนต์แบบฟอร์มผู้ใช้อาจเปิดให้ใช้ v-model:first และ v-model:last พร้อมกัน
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>เหตุใดการออกแบบนี้จึงทรงพลัง
เนื่องจาก v-model เป็นเพียงพร็อพกับเหตุการณ์ คอมโพเนนต์แบบกำหนดเองจึงให้ความรู้สึกเหมือนช่องป้อนข้อมูลเนทีฟสำหรับผู้ใช้งาน การมีโมเดลแบบระบุชื่อหลายรายการช่วยให้คอมโพเนนต์เดียวจัดการการผูกข้อมูลแบบสองทางหลายรายการได้อย่างเป็นระเบียบ
ข้อผิดพลาดที่พบบ่อย
อย่าเปลี่ยนแปลงพร็อพ modelValue โดยตรงภายในคอมโพเนนต์ลูก เพราะจะทำให้การไหลของพร็อพทางเดียวเสียหาย ให้ส่งเหตุการณ์อัปเดตเสมอ และปล่อยให้คอมโพเนนต์แม่เป็นเจ้าของสถานะ
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการทำงานภายในของ v-model
สรุป
คุณได้ทำความเข้าใจวิธีการทำงานของ v-model แล้ว:
- บนช่องป้อนข้อมูล จะขยายเป็น
:value+@input - บนคอมโพเนนต์ จะใช้
modelValue+update:modelValue - โมเดลแบบระบุชื่อ (
v-model:title) จะกำหนดเป้าหมายให้พร็อพและเหตุการณ์เฉพาะรายการ - คุณสามารถใช้ v-model หลายรายการบนคอมโพเนนต์เดียวได้
คำถามที่พบบ่อย
บทเรียน “v-model: กลไกภายในของการผูกข้อมูลสองทาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “v-model: กลไกภายในของการผูกข้อมูลสองทาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “v-model: กลไกภายในของการผูกข้อมูลสองทาง”
v-model คอมไพล์เป็น :modelValue + @update:modelValue ชื่อ v-model แบบกำหนดเอง และ v-model บนคอมโพเนนต์ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “v-model: กลไกภายในของการผูกข้อมูลสองทาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model: กลไกภายในของการผูกข้อมูลสองทาง
- ตัวปรับแต่งเหตุการณ์ v-on
- การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind
- การเขียนคำสั่งแบบกำหนดเอง