องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
เนื้อหาการกระจายสล็อต
①ภาพรวม:
พูดง่ายๆคือหากองค์ประกอบหลักจำเป็นต้องใส่ DOMs บางส่วนไว้ในส่วนประกอบลูกแล้ว DOM เหล่านี้จะปรากฏขึ้นไม่แสดงที่ซึ่งพวกเขาจะแสดงและวิธีการแสดงซึ่งเป็นความรับผิดชอบของการแจกแจงสล็อต
②โดยค่าเริ่มต้น
เนื้อหาขององค์ประกอบหลักที่อยู่ในส่วนประกอบของเด็กจะไม่ปรากฏขึ้น
ตัวอย่างเช่นรหัส:
<div id = "แอป"> <hildent> <span> 12345 </span> <!-บรรทัดด้านบนจะไม่ปรากฏขึ้น-> </vilder> </div> <script> var vm = new Vue ({el: '#app' ส่วนประกอบ: {เด็ก: {// นี่ไม่มีการใช้ปุ่ม - </script>เนื้อหาที่แสดงเป็นปุ่มปุ่มซึ่งไม่มีเนื้อหาในแท็ก SPAN
③single slot
พูดง่ายๆคือถ้าคุณใช้แท็กนี้เท่านั้นคุณสามารถวางส่วนประกอบหลักไว้ในเนื้อหาขององค์ประกอบเด็กและวางไว้ที่ต้องการให้แสดง
<div id = "แอป"> <hilding> <span> 12345 </span> <!-บรรทัดด้านบนจะไม่ปรากฏขึ้น-> </vilder> </div> <script> var vm = new Vue ({el: '#app' ส่วนประกอบ: {เด็ก: {// นี้ไม่มีค่ากลับมา ใช้แท็กปุ่ม </button> "}}}); </script>ตัวอย่างเช่นหากคุณเขียนสิ่งนี้ผลลัพธ์คือ:
<button> <span> 12345 </span> เพื่อชี้แจงขอบเขตของการกระทำให้ใช้แท็กปุ่ม </button>
นั่นคือเนื้อหาขององค์ประกอบหลักที่วางไว้ในองค์ประกอบลูกจะถูกแทรกลงในตำแหน่ง <lot> </lot> ของส่วนประกอบลูก
โปรดทราบว่าแม้ว่าจะมีหลายแท็กพวกเขาจะถูกแทรกเข้าด้วยกันซึ่งเทียบเท่ากับการแทนที่แท็ก <lot> </lot> ด้วยแท็กที่วางไว้ในส่วนประกอบเด็ก
④ชื่อสล็อต
ใส่แท็ก HTML ที่แตกต่างกันวางไว้ในส่วนประกอบย่อยในสถานที่ต่าง ๆ
ส่วนประกอบหลักจะเพิ่มแอตทริบิวต์ slot =” ชื่อ” ไปยังแท็กที่จะแจกจ่าย
ส่วนประกอบเด็กเพิ่มชื่อชื่อ =” ชื่อ” ในแท็กสล็อตของตำแหน่งการแจกแจงที่สอดคล้องกันจากนั้นวางแท็กที่สอดคล้องกันในตำแหน่งที่สอดคล้องกัน
รหัสตัวอย่าง:
<div id = "app"> <เด็ก> <span slot = "First"> 12345 </span> <span slot = "second"> 56789 </span> <!-บรรทัดด้านบนจะไม่แสดง-> </children> </div> "<button> <slot name = 'First'> </lot> เพื่อชี้แจงขอบเขตของการกระทำ <slot name = 'second'> </lot> ดังนั้นให้ใช้แท็กปุ่ม </button>"}}}); </script>
ผลลัพธ์จะแสดงเป็น: (เพื่อความสะดวกในการดูการพักสายได้รับการปรับด้วยตนเอง)
<button> <span slot = "First"> 12345 </span> เพื่อชี้แจงขอบเขตของการกระทำ <span slot = "second"> 56789 </span> ดังนั้นให้ใช้แท็กปุ่ม </button>
⑤scopeของเนื้อหาการกระจาย:
ขอบเขตของเนื้อหาแบบกระจายจะถูกกำหนดตามเทมเพลตที่ตั้งอยู่ ตัวอย่างเช่นแท็กด้านบนถูกควบคุมโดยเทมเพลตขององค์ประกอบหลัก (แม้ว่าจะรวมอยู่ในแท็กเด็กขององค์ประกอบเด็ก แต่เนื่องจากมันไม่ได้อยู่ในแอตทริบิวต์เทมเพลตขององค์ประกอบเด็กมันไม่ได้อยู่ในองค์ประกอบของเด็ก) มันถูกควบคุมโดยองค์ประกอบหลัก
รหัสตัวอย่าง:
<div id = "แอป"> <เด็ก> <span slot = "แรก" @คลิก = "tobeknow"> 12345 </span> <span slot = "วินาที"> 56789 </span> <! วิธีการของผู้ปกครอง ");}}, ส่วนประกอบ: {เด็ก: {// สิ่งนี้ไม่มีค่าคืนและเทมเพลตจะไม่ถูกแจกจ่ายต่อไป:" <ปุ่ม> <slot name = 'First'> </slot> เพื่อชี้แจงขอบเขตของการกระทำ </script>เมื่อพื้นที่ของข้อความ 12345 ถูกคลิก (แทนที่จะเป็นปุ่มทั้งหมด) วิธี Tobeknow ขององค์ประกอบหลักจะถูกเรียกใช้
แต่เมื่อคลิกที่พื้นที่อื่น ๆ จะไม่มีผล
บทช่วยสอนอย่างเป็นทางการกล่าวว่า:
เนื้อหาของเทมเพลตองค์ประกอบหลักถูกรวบรวมภายในขอบเขตขององค์ประกอบหลัก เนื้อหาของเทมเพลตองค์ประกอบเด็กถูกรวบรวมภายในขอบเขตขององค์ประกอบเด็ก
⑥เคล็ดลับเมื่อไม่มีการกระจายเนื้อหา:
หากองค์ประกอบหลักไม่ได้วางแท็กไว้ในส่วนประกอบลูกหรือส่วนประกอบหลักวางแท็กในส่วนประกอบลูก แต่มีแอตทริบิวต์สล็อตและส่วนประกอบลูกไม่มีแท็กสำหรับแอตทริบิวต์สล็อต
จากนั้นแท็กสล็อตขององค์ประกอบเด็กจะไม่มีบทบาทใด ๆ
เนื้อหาในแท็กสล็อตจะปรากฏขึ้นเมื่อไม่มีเนื้อหาในแท็กสล็อต
ดังในรหัสตัวอย่าง:
<div id = "แอป"> <เด็ก> <span slot = "แรก"> 【 12345 】 </span> <!-บรรทัดด้านบนจะไม่ปรากฏขึ้น-> </เด็ก> </div> <script> var vm = vue ใหม่ ({el: '#App' ส่วนประกอบ: {เด็ก: {// name = 'First'> <putton> 【หากไม่มีเนื้อหามันจะแสดงให้ฉันเห็น 1 】 </ปุ่ม> </slot> เพื่อชี้แจงขอบเขตของการกระทำ <slot name = 'สุดท้าย'> <putton> 【หากไม่มีเนื้อหา </script>ภาพประกอบ:
【 1 】แท็กสล็อตที่มี name = 'First' จะถูกแทนที่ด้วยแท็กที่สอดคล้องกับส่วนประกอบพาเรนต์ (เนื้อหาภายในแท็กสล็อตจะถูกทิ้ง);
【 2 】แท็กสล็อตของชื่อ = 'สุดท้าย' เนื่องจากไม่มีเนื้อหาที่สอดคล้องกันเนื้อหาภายในแท็กสล็อตจะปรากฏขึ้น
⑦หากคุณต้องการควบคุมคุณสมบัติของแท็กรูทขององค์ประกอบย่อย
[1] ประการแรกเนื่องจากแท็กเทมเพลตเป็นขององค์ประกอบหลักจึงไม่สามารถผูกคำแนะนำขององค์ประกอบเด็กเข้ากับแท็กเทมเพลต (เพราะมันเป็นส่วนประกอบของแม่);
[2] หากคุณต้องการควบคุมว่าส่วนประกอบของเด็กจะปรากฏขึ้นหรือไม่ (เช่น V-IF หรือ V-Show) ผ่านส่วนประกอบหลักคำสั่งนี้เห็นได้ชัดว่าเป็นส่วนประกอบของผู้ปกครอง (เช่นวางภายใต้ข้อมูลขององค์ประกอบหลัก) แท็กสามารถเขียนได้บนเทมเพลตขององค์ประกอบเด็ก
เป็นรหัส:
<div id = "app"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบเด็ก </button> <เด็ก v-if = "abc"> </children> </div> <script> var vm = new vue ({el: '#App', ข้อมูล: {ABC: FALSE}, วิธีการ: เด็ก ๆ : {// สิ่งนี้ไม่มีค่าส่งคืนเทมเพลต: "<div> นี่คือองค์ประกอบของเด็ก </div>"}}}); </script>ภาพประกอบ:
ควบคุมว่าส่วนประกอบลูกจะปรากฏผ่านส่วนประกอบหลักหรือไม่ (คลิกปุ่มเพื่อสลับค่าของคำสั่ง V-IF)
[3] หากคุณต้องการควบคุมว่าส่วนประกอบของเด็กจะปรากฏขึ้นหรือไม่ (ตัวอย่างเช่นปล่อยให้มันซ่อน) คำสั่งนี้เห็นได้ชัดว่าเป็นส่วนประกอบของเด็ก (ค่าจะถูกวางไว้ภายใต้แอตทริบิวต์ข้อมูลขององค์ประกอบเด็ก) จากนั้นไม่สามารถเขียนได้ดังกล่าวข้างต้น
<div id = "แอป"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบเด็ก </button> <เด็ก> <span slot = "First"> 【 12345 】 </span> <! สิ่งนี้. $ children [0] .toHidden = true;}}, ส่วนประกอบ: {เด็ก: {// สิ่งนี้ไม่มีค่าคืนและเทมเพลตจะไม่แจกจ่ายต่อไป: "<div v-if = 'toHidden' @click = 'tohide'> นี่คือองค์ประกอบของเด็ก this.toHidden =! this.toHidden;}}}}}}}}); </script>ภาพประกอบ:
การคลิกที่องค์ประกอบเด็กจะทำให้องค์ประกอบของเด็กหายไป
คลิกปุ่มขององค์ประกอบหลักเพื่อแสดงส่วนประกอบลูกโดยเปลี่ยนคุณสมบัติ tohidden ขององค์ประกอบลูก
คำแนะนำขององค์ประกอบเด็กนั้นถูกผูกไว้กับเทมเพลตขององค์ประกอบเด็ก (สามารถเรียกได้);
ข้างต้นเป็นคำอธิบายโดยละเอียดของตัวอย่างการกระจายเนื้อหาสล็อตขององค์ประกอบ VueJS ที่ 11 ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!