การใช้สล็อตใน Vue.js

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

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

สล็อตคืออะไร?

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

 // frame.vue <template> <div class="frame"> <slot></slot> </div> </template>

คอมโพเนนต์นี้มี wrapper div สมมติว่า div อยู่ที่นั่นเพื่อสร้างกรอบโวหารรอบๆ เนื้อหา คอมโพเนนต์นี้สามารถใช้โดยทั่วไปเพื่อล้อมกรอบเนื้อหาใดๆ ที่คุณต้องการ มาดูกันว่าน่าใช้ขนาดไหน ส่วนประกอบ frame ในที่นี้หมายถึงส่วนประกอบที่เราเพิ่งสร้างไว้ด้านบน

 // app.vue <template> <frame><img src="an-image.jpg"></frame> </template>

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

 // frame.vue <template> <div class="frame"> <slot>This is the default content if nothing gets specified to go here</slot> </div> </template>

ทีนี้ถ้าเราใช้แบบนี้แทน:

 // app.vue <template> <frame /> </template>

ข้อความเริ่มต้นของ "นี่คือเนื้อหาเริ่มต้นหากไม่มีการระบุให้ไปที่นี่" จะปรากฏขึ้น แต่ถ้าเราใช้เหมือนที่เคยทำก่อนหน้านี้ แท็ก img จะแทนที่ข้อความเริ่มต้น

หลาย/ช่องที่มีชื่อ

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

 // titled-frame.vue <template> <div class="frame"> <header><h2><slot name="header">Title</slot></h2></header> <slot>This is the default content if nothing gets specified to go here</slot> </div> </template>

เราคงช่องเริ่มต้นเดิมไว้ แต่คราวนี้เราเพิ่มช่องที่ชื่อ header ซึ่งคุณสามารถป้อนชื่อได้ คุณใช้มันแบบนี้:

 // app.vue <template> <titled-frame> <template v-slot:header> <!-- The code below goes into the header slot --> My Image's Title </template> <!-- The code below goes into the default slot --> <img src="an-image.jpg"> </titled-frame> </template>

เช่นเดียวกับเมื่อก่อน หากเราต้องการเพิ่มเนื้อหาลงในช่องเริ่มต้น เพียงแค่ใส่ลงในองค์ประกอบ titled-frame โดยตรง ในการเพิ่มเนื้อหาลงในช่องที่มีชื่อ เราจำเป็นต้องห่อโค้ดในแท็ก template ด้วยคำสั่ง v-slot คุณเพิ่มโคลอน ( : ) หลัง v-slot แล้วเขียนชื่อของช่องที่คุณต้องการให้ส่งเนื้อหาไป โปรดทราบว่า v-slot นั้นใหม่สำหรับ Vue 2.6 ดังนั้น หากคุณใช้เวอร์ชันเก่า คุณจะต้องอ่านเอกสารเกี่ยวกับไวยากรณ์ของสล็อตที่เลิกใช้แล้ว

สล็อตที่มีขอบเขต

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

 // current-user.vue <template> <span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span> </template> <script> export default { data () { return { user: ... } } } </script>

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

 // app.vue <template> <current-user> <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template> </current-user> </template>

ในการเข้าถึงข้อมูลที่ส่งผ่านไปยังสล็อต เราระบุชื่อของตัวแปรขอบเขตด้วยค่าของคำสั่ง v-slot

มีข้อควรจำสองสามข้อที่นี่:

• เราระบุชื่อ default แม้ว่าเราไม่ต้องการสำหรับช่องเริ่มต้นก็ตาม แต่เราสามารถใช้ v-slot="slotProps" แทนได้
• คุณไม่จำเป็นต้องใช้ slotProps เป็นชื่อ คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการ
• หากคุณใช้เฉพาะช่องเริ่มต้น คุณสามารถข้ามแท็ก template ภายในนั้นและใส่คำสั่ง v-slot ลงในแท็ก current-user ได้โดยตรง
• คุณสามารถใช้การทำลายอ็อบเจ็กต์เพื่อสร้างการอ้างอิงโดยตรงไปยังข้อมูลสล็อตที่อยู่ในขอบเขต แทนที่จะใช้ชื่อตัวแปรเดียว กล่าวอีกนัยหนึ่ง คุณสามารถใช้ v-slot="{user}" แทน v-slot="slotProps" จากนั้นคุณสามารถใช้ user โดยตรงแทน slotProps.user

เมื่อพิจารณาบันทึกเหล่านี้แล้ว ตัวอย่างข้างต้นสามารถเขียนใหม่ได้ดังนี้:

 // app.vue <template> <current-user v-slot="{user}"> {{ user.firstName }} </current-user> </template>

อีกสองสามสิ่งที่ควรคำนึงถึง:

• คุณสามารถผูกค่ามากกว่าหนึ่งค่าด้วยคำสั่ง v-bind ในตัวอย่าง ฉันทำได้มากกว่าแค่ user
• คุณสามารถส่งฟังก์ชันไปยังช่องที่กำหนดขอบเขตได้เช่นกัน ห้องสมุดหลายแห่งใช้สิ่งนี้เพื่อจัดเตรียมส่วนประกอบที่นำมาใช้ใหม่ได้ดังที่คุณจะเห็นในภายหลัง
• v-slot มีนามแฝงของ # ดังนั้นแทนที่จะเขียน v-slot:header="data" คุณสามารถเขียน #header="data" ได้ คุณยังสามารถระบุ #header แทน v-slot:header เมื่อคุณไม่ได้ใช้ช่องที่มีขอบเขต สำหรับช่องเริ่มต้น คุณจะต้องระบุชื่อ default เมื่อคุณใช้นามแฝง กล่าวอีกนัยหนึ่ง คุณจะต้องเขียน #default="data" แทน #="data"

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

คุณสามารถทำอะไรกับสล็อตได้บ้าง?

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

รูปแบบที่ใช้ซ้ำได้

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

สำหรับตัวอย่างแรกของเรา เรามาเริ่มด้วยอะไรง่ายๆ กันก่อน นั่นคือปุ่ม ลองนึกภาพคุณและทีมของคุณใช้ Bootstrap* ด้วย Bootstrap ปุ่มของคุณมักจะถูกมัดด้วยคลาส `btn` พื้นฐานและคลาสที่ระบุสี เช่น `btn-primary' คุณยังสามารถเพิ่มคลาสขนาดได้ เช่น `btn-lg`

* ฉันไม่สนับสนุนหรือกีดกันคุณจากการทำเช่นนี้ ฉันแค่ต้องการบางอย่างเป็นตัวอย่างและเป็นที่รู้จักกันดี

มาสมมติกัน เพื่อความเรียบง่ายที่แอป/ไซต์ของคุณใช้ btn-primary และ btn-lg เสมอ คุณไม่ต้องการที่จะเขียนทั้งสามชั้นเรียนบนปุ่มของคุณเสมอ หรือบางทีคุณอาจไม่ไว้ใจมือใหม่ที่จำต้องทำทั้งสามอย่าง ในกรณีนั้น คุณสามารถสร้างส่วนประกอบที่มีทั้งสามคลาสโดยอัตโนมัติได้ แต่คุณจะอนุญาตให้ปรับแต่งเนื้อหาได้อย่างไร พ prop อพใช้ไม่ได้เพราะแท็ก button อนุญาตให้มี HTML ได้ทุกประเภท ดังนั้นเราจึงควรใช้ช่อง

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

ตอนนี้เราสามารถใช้มันได้ทุกที่กับทุกเนื้อหาที่คุณต้องการ:

 <!-- somewhere else, using my-button.vue --> <template> <my-button> <img src="/img/awesome-icon.jpg"> SMASH THIS BUTTON TO BECOME AWESOME FOR ONLY $500!!! </my-button> </template>

แน่นอน คุณสามารถเลือกสิ่งที่ใหญ่กว่าปุ่มได้มาก ติดกับ Bootstrap ลองดูที่โมดอลหรือส่วน HTML อย่างน้อย ฉันจะไม่เข้าสู่การทำงาน…ยัง

 <!-- my-modal.vue --> <template> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <slot name="header"></slot> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <slot name="body"></slot> </div> <div class="modal-footer"> <slot name="footer"></slot> </div> </div> </div> </div> </template>

ตอนนี้ใช้สิ่งนี้:

 <!-- somewhere else, using my-modal.vue --> <template> <my-modal> <template #header><!-- using the shorthand for `v-slot` --> <h5>Awesome Interruption!</h5> </template> <template #body> <p>We interrupt your use of our application to let you know that this application is awesome and you should continue using it every day for the rest of your life!</p> </template> <template #footer> <em>Now back to your regularly scheduled app usage</em> </template> </my-modal> </template>

กรณีการใช้งานประเภทด้านบนสำหรับสล็อตเห็นได้ชัดว่ามีประโยชน์มาก แต่สามารถทำอะไรได้มากกว่านั้นอีก

การนำฟังก์ชันกลับมาใช้ใหม่

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

 <!-- my-modal.vue --> <template> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <slot name="header"></slot> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <slot name="body"></slot> </div> <div class="modal-footer"> <!-- using `v-bind` shorthand to pass the `closeModal` method to the component that will be in this slot --> <slot name="footer" :closeModal="closeModal"></slot> </div> </div> </div> </div> </template> <script> export default { //... methods: { closeModal () { // Do what needs to be done to close the modal... and maybe remove it from the DOM } } } </script>

เมื่อคุณใช้ส่วนประกอบนี้ คุณสามารถเพิ่มปุ่มที่ส่วนท้ายที่สามารถปิดโมดอลได้ โดยปกติ ในกรณีของ Bootstrap modal คุณสามารถเพิ่ม data-dismiss="modal" ให้กับปุ่มได้ แต่เราต้องการซ่อน Bootstrap บางรายการให้ห่างจากส่วนประกอบที่จะเสียบเข้าไปในองค์ประกอบ modal นี้ ดังนั้นเราจึงส่งต่อฟังก์ชันที่พวกเขาสามารถเรียกได้ และไม่มีใครฉลาดไปกว่าการมีส่วนร่วมของ Bootstrap:

 <!-- somewhere else, using my-modal.vue --> <template> <my-modal> <template #header><!-- using the shorthand for `v-slot` --> <h5>Awesome Interruption!</h5> </template> <template #body> <p>We interrupt your use of our application to let you know that this application is awesome and you should continue using it every day for the rest of your life!</p> </template> <!-- pull in `closeModal` and use it in a button's click handler --> <template #footer="{closeModal}"> <button @click="closeModal"> Take me back to the app so I can be awesome </button> </template> </my-modal> </template>

Renderless Components

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

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

 <template> <transition name="fade" v-bind="$attrs" v-on="$listeners"> <slot></slot> </transition> </template> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>

นี่เป็นตัวอย่างแปลก ๆ ขององค์ประกอบที่ไม่มีการแสดงผล เนื่องจากไม่มี JavaScript อยู่ในนั้น ส่วนใหญ่เป็นเพราะเราเพิ่งสร้างเวอร์ชันที่ใช้ซ้ำได้ซึ่งกำหนดค่าไว้ล่วงหน้าของฟังก์ชันแบบไม่มีการแสดงผลในตัว: transition

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

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

 <!-- promised.vue --> <template> <span> <slot name="rejected" v-if="error" :error="error"></slot> <slot name="resolved" v-else-if="resolved" :data="data"></slot> <slot name="pending" v-else></slot> </span> </template> <script> export default { props: { promise: Promise }, data: () => ({ resolved: false, data: null, error: null }), watch: { promise: { handler (promise) { this.resolved = false this.error = null if (!promise) { this.data = null return } promise.then(data => { this.data = data this.resolved = true }) .catch(err => { this.error = err this.resolved = true }) }, immediate: true } } } </script>

เกิดอะไรขึ้นที่นี่? อันดับแรก โปรดทราบว่าเราได้รับพร็อพที่เรียกว่า promise นั่นคือ Promise ในส่วนการ watch เราเฝ้าติดตามการเปลี่ยนแปลงของสัญญาและเมื่อมีการเปลี่ยนแปลง (หรือทันทีในการสร้างส่วนประกอบด้วยคุณสมบัติ immediate ) เราจะล้างสถานะ then เรียกและ catch ตามสัญญา อัปเดตสถานะเมื่อเสร็จสิ้นหรือ ล้มเหลว

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

และนี่คือตัวอย่างการใช้งาน:

 <template> <div> <promised :promise="somePromise"> <template #resolved="{ data }"> Resolved: {{ data }} </template> <template #rejected="{ error }"> Rejected: {{ error }} </template> <template #pending> Working on it... </template> </promised> </div> </template> ...

เราส่งต่อใน somePromise ไปยังองค์ประกอบที่ไม่มีการเรนเดอร์ ระหว่างที่รอจนกว่าจะเสร็จสิ้น เรากำลังแสดง "กำลังดำเนินการอยู่..." เนื่องจากช่องที่ pending การ หากสำเร็จ เราจะแสดง “Resolved:” และค่าความละเอียด หากล้มเหลว เราจะแสดง “Rejected:” และข้อผิดพลาดที่ทำให้เกิดการปฏิเสธ ตอนนี้เราไม่จำเป็นต้องติดตามสถานะของสัญญาภายในส่วนประกอบนี้อีกต่อไปเพราะส่วนนั้นถูกดึงออกมาเป็นส่วนประกอบที่นำกลับมาใช้ใหม่ได้

ดังนั้น เราจะทำอย่างไรกับ span นั้นที่ล้อมรอบช่องใน promised.vue หากต้องการลบออก เราจะต้องลบส่วน template และเพิ่มฟังก์ชันการ render ให้กับองค์ประกอบของเรา:

 render () { if (this.error) { return this.$scopedSlots['rejected']({error: this.error}) } if (this.resolved) { return this.$scopedSlots['resolved']({data: this.data}) } return this.$scopedSlots['pending']() }

ไม่มีอะไรซับซ้อนเกินไปเกิดขึ้นที่นี่ เราแค่ใช้บาง if บล็อกเพื่อค้นหาสถานะแล้วส่งคืนสล็อตที่มีขอบเขตที่ถูกต้อง (ผ่าน this.$scopedSlots['SLOTNAME'](...) ) และส่งข้อมูลที่เกี่ยวข้องไปยังขอบเขตของสล็อต เมื่อคุณไม่ได้ใช้เทมเพลต คุณสามารถข้ามโดยใช้นามสกุลไฟล์ .vue ได้โดยการดึง JavaScript ออกจากแท็ก script และเพียงแค่เสียบเข้าไปในไฟล์ . .js สิ่งนี้ควรให้ประสิทธิภาพเล็กน้อยแก่คุณเมื่อรวบรวมไฟล์ Vue เหล่านั้น

ตัวอย่างนี้เป็นเวอร์ชัน vue-promised ที่ได้รับการดัดแปลงเล็กน้อย ซึ่งฉันขอแนะนำให้ใช้ตัวอย่างด้านบนนี้มากกว่า เพราะมันครอบคลุมถึงข้อผิดพลาดที่อาจเกิดขึ้น มีตัวอย่างที่ยอดเยี่ยมอื่นๆ มากมายของส่วนประกอบที่ไม่มีการแสดงผลเช่นกัน Baleada เป็นไลบรารีทั้งหมดที่เต็มไปด้วยองค์ประกอบแบบไม่มีการแสดงผลซึ่งมีฟังก์ชันที่เป็นประโยชน์เช่นนี้ นอกจากนี้ยังมี vue-virtual-scroller สำหรับควบคุมการแสดงรายการตามสิ่งที่มองเห็นบนหน้าจอหรือ PortalVue สำหรับเนื้อหา "teleporting" ไปยังส่วนต่างๆ ของ DOM โดยสิ้นเชิง

ฉันออกไปแล้ว

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