defineExpose และ useAttrs
การเปิดเผยส่วนภายในของคอมโพเนนต์ด้วย defineExpose() และการใช้ useAttrs() สำหรับแอตทริบิวต์ที่ส่งต่อ
defineExpose และ useAttrs เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเปิดเผยและการส่งต่อ
เครื่องมืออีกสองอย่างช่วยให้การสื่อสารระหว่างคอมโพเนนต์สมบูรณ์ยิ่งขึ้น: defineExpose ให้คอมโพเนนต์แม่เข้าถึงข้อมูลภายในคอมโพเนนต์ลูก และ useAttrs ให้แอตทริบิวต์ส่วนที่เหลือซึ่งคอมโพเนนต์แม่ส่งมา ทั้งสองอย่างพบได้บ่อยในคอมโพเนนต์ที่นำกลับมาใช้ซ้ำได้
คอมโพเนนต์จะปิดการเข้าถึงไว้เป็นค่าเริ่มต้น
เมื่อใช้ <script setup> จะไม่มีสิ่งใดภายในคอมโพเนนต์ที่เข้าถึงได้จาก template ref ของคอมโพเนนต์แม่ การห่อหุ้มนี้เป็นข้อดี แต่บางครั้งคอมโพเนนต์แม่ก็จำเป็นต้องเรียกเมธอดของคอมโพเนนต์ลูกโดยชอบธรรม
ใช้ defineExpose เพื่อเปิดทาง
defineExpose ใช้เผยแพร่เมธอดหรือค่าที่เลือกไว้อย่างชัดเจนให้คอมโพเนนต์แม่ ส่งออบเจ็กต์ที่มีสิ่งที่คุณต้องการแชร์เข้าไป
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>การเรียกเมธอดที่เปิดเผยจากคอมโพเนนต์แม่
คอมโพเนนต์แม่อ้างอิงคอมโพเนนต์ลูกด้วย template ref แล้วเรียกเมธอดที่เปิดเผยไว้ คีย์ที่ส่งให้ defineExpose เท่านั้นที่จะมองเห็นได้
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>ตัวอย่างการโฟกัส
การเปิดเผยเมธอด focus ช่วยให้คอมโพเนนต์แม่สั่งโฟกัสอินพุตภายในคอมโพเนนต์แบบกำหนดเองได้ โดยไม่ทำลายการห่อหุ้ม
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>แอตทริบิวต์ส่งต่อคืออะไร
เมื่อคอมโพเนนต์แม่ใส่แอตทริบิวต์ให้คอมโพเนนต์ของคุณ แต่แอตทริบิวต์นั้นไม่ใช่ prop หรือเหตุการณ์ที่ประกาศไว้ เช่น class, id หรือ data-* แอตทริบิวต์นั้นจะกลายเป็น แอตทริบิวต์ส่งต่อ
อ่าน Attrs ด้วย useAttrs
useAttrs() ส่งคืนออบเจ็กต์ที่มีแอตทริบิวต์ส่งต่อทั้งหมด ใช้เมื่อคุณต้องการตรวจสอบหรือย้ายแอตทริบิวต์เหล่านั้นในสคริปต์
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>การส่งต่อโดยอัตโนมัติ
ตามค่าเริ่มต้น Vue จะใส่ attrs ที่ส่งต่อไปยังองค์ประกอบรากเพียงองค์ประกอบเดียวของแม่แบบ หากคอมโพเนนต์ของคุณมี div เป็นองค์ประกอบรากเพียงรายการเดียว class ที่คอมโพเนนต์แม่ส่งมาจะไปอยู่ที่นั่นโดยอัตโนมัติ
ปิดการส่งต่ออัตโนมัติ
เมื่อต้องการวาง attrs ไว้ที่อื่นแทนองค์ประกอบราก เช่น วางไว้ที่อินพุตด้านในของตัวห่อหุ้ม ให้ปิดการส่งต่ออัตโนมัติด้วย inheritAttrs: false ในบล็อกสคริปต์ปกติ
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>ส่งต่อ Attrs ด้วย v-bind
หลังจากปิดการส่งต่ออัตโนมัติแล้ว ให้ส่งต่อ attrs ไปยังองค์ประกอบที่เลือกด้วย v-bind="attrs" นี่คือรูปแบบมาตรฐานสำหรับตัวห่อหุ้มอินพุต
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>ควรใช้แต่ละอย่างเมื่อใด
- defineExpose: ให้คอมโพเนนต์แม่เรียกเมธอดของคอมโพเนนต์ลูกผ่าน template ref
- useAttrs + inheritAttrs: false + v-bind: ควบคุมได้อย่างแม่นยำว่าแอตทริบิวต์ที่คอมโพเนนต์แม่ส่งมาจะไปอยู่ที่ใด
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับ expose และ attrs
ทบทวน
ประเด็นสำคัญ:
defineExposeเผยแพร่เมธอดหรือค่าที่เลือกไว้ให้ ref ของคอมโพเนนต์แม่- Attrs ที่ส่งต่อคือแอตทริบิวต์จากคอมโพเนนต์แม่ที่ไม่ใช่ prop และไม่ใช่เหตุการณ์
useAttrs()ใช้อ่านแอตทริบิวต์เหล่านี้ ส่วนการส่งต่ออัตโนมัติจะส่งไปยังองค์ประกอบราก- ใช้
inheritAttrs: false+v-bind="attrs"เพื่อเปลี่ยนตำแหน่งปลายทาง
คำถามที่พบบ่อย
บทเรียน “defineExpose และ useAttrs” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “defineExpose และ useAttrs” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “defineExpose และ useAttrs”
การเปิดเผยส่วนภายในของคอมโพเนนต์ด้วย defineExpose() และการใช้ useAttrs() สำหรับแอตทริบิวต์ที่ส่งต่อ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “defineExpose และ useAttrs” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บทนำสู่ script setup
- defineProps และ defineEmits
- defineExpose และ useAttrs
- การนำเข้าและใช้ Composables ใน script setup