องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
บทความนี้เป็นคำอธิบายโดยละเอียดเพิ่มเติมที่รวบรวมโดยบรรณาธิการตามเอกสารอย่างเป็นทางการ รหัสนั้นสมบูรณ์และสมบูรณ์แบบมากขึ้นซึ่งเหมาะสำหรับผู้เริ่มต้นที่จะเรียนรู้
เอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
ส่วนประกอบ - รายการเบ็ดเตล็ดมีรายละเอียดดังนี้:
①ส่วนประกอบและ v-for
พูดง่ายๆคือส่วนประกอบจะถูกนำกลับมาใช้ใหม่หลายครั้ง
ตัวอย่างเช่นแถวที่แน่นอนในตารางหรือการแสดงหน้าต่างผลิตภัณฑ์อีคอมเมิร์ซ (หน้าต่างเดี่ยว) สามารถกลายเป็นส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้
เพียงแค่เขียนหนึ่งในนั้นเป็นองค์ประกอบแล้วทำให้แหล่งข้อมูลเป็นอาร์เรย์ (หรือวัตถุ แต่โดยส่วนตัวแล้วฉันคิดว่ามันเป็นอาร์เรย์) ผ่าน V-for Traversal แต่ละอินสแตนซ์ของส่วนประกอบสามารถรับหนึ่งในอาร์เรย์ได้ดังนั้นจึงสร้างส่วนประกอบทั้งหมด
เนื่องจากมัลติเพล็กซิ่งต้องใช้อุปกรณ์ประกอบฉากเพื่อเชื่อมโยงผลลัพธ์การสำรวจ I และข้อมูลที่ถูกผูกไว้กับอุปกรณ์ประกอบฉาก วิธีการเชื่อมโยงนั้นเหมือนกับรูปแบบธรรมดาและถูกผูกไว้ในเทมเพลต
รหัสตัวอย่าง:
<div id = "app"> <button @click = "toknowchildren"> คลิกเพื่อให้การแสดงผลส่วนประกอบลูก </button> <table> <tr> <td> ดัชนี </td> <td> id </td> <td> คำอธิบาย </td> </tr คือ <tr is = </div> <script> var vm = new vue ({el: '#app', ข้อมูล: {รายการ: [1, 2, 3, 4]}, วิธีการ: {toknowchildren: function () {// สวิตช์คอมโพเนนต์คอนโซล "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> นี่คือองค์ประกอบของเด็ก </td>" + "</tr> </script>ภาพประกอบ:
【 1 】อย่าลืมใส่ข้อมูลที่จะส่งผ่านในอุปกรณ์ประกอบฉาก!
【 2 】ผูกดัชนีและดัชนี $ ดัชนีเนื่องจากดัชนีเริ่มต้นที่ 0 ดังนั้นคอลัมน์ที่ดัชนีจะอยู่ที่ 0; ID ถูกผูกไว้กับฉันที่ข้ามรายการดังนั้น id เริ่มต้นที่ 1
[3] คุณสามารถได้รับส่วนประกอบเด็กผ่านสิ่งนี้ $ เด็กในองค์ประกอบหลัก (แต่มันเป็นปัญหามากขึ้นโดยเฉพาะอย่างยิ่งเมื่อมีส่วนประกอบมากมายมันยากที่จะค้นหา);
②เขียนส่วนประกอบที่นำกลับมาใช้ใหม่ได้:
พูดง่ายๆก็เป็นไปได้ว่าส่วนประกอบแบบใช้ครั้งเดียว (ใช้ที่นี่เท่านั้นที่ไม่ได้นำกลับมาใช้ใหม่) เชื่อมต่อกับส่วนประกอบอื่น ๆ อย่างแน่นหนา แต่ส่วนประกอบที่นำกลับมาใช้ใหม่ควรกำหนดอินเทอร์เฟซสาธารณะที่ชัดเจน (มิฉะนั้นคนอื่นจะใช้มันอย่างไร?)
ส่วนประกอบที่ใช้ซ้ำได้โดยทั่วไปจำเป็นต้องโต้ตอบกับภายนอกและส่วนประกอบและอินเทอร์เฟซแบบโต้ตอบที่เปิดเผยจากภายนอก ได้แก่ :
【 1 】อุปกรณ์ประกอบฉาก: อนุญาตให้ส่งข้อมูลสภาพแวดล้อมภายนอกไปยังส่วนประกอบ;
【 2 】เหตุการณ์: อนุญาตให้ส่วนประกอบเรียกการกระทำของสภาพแวดล้อมภายนอกนั่นคือโดยการเพิ่มคำสั่ง v-on ที่จุดเมานต์วิธีการขององค์ประกอบหลักจะถูกกระตุ้นในเวลาเดียวกันเมื่อเหตุการณ์ขององค์ประกอบลูกถูกเรียกใช้
[3] สล็อต: การแจกแจงทำให้เนื้อหาขององค์ประกอบหลักถูกแทรกเข้าไปในโครงสร้างมุมมองขององค์ประกอบเด็ก
เป็นรหัส:
<div id = "app"> <p> นี่เป็นองค์ประกอบหลักแรก </p> <วิดเจ็ต: The-value = "test" @some = "toDo"> <span> 【เนื้อหาขององค์ประกอบหลักที่แทรก】 </span> </widget> </div> <script> vue.Component ("widget", {template: "<button @click = 'dosomething'> <lot> </slot> นี่คือส่วนประกอบที่นำกลับมาใช้ใหม่คลิก {{thevalue}} </button>, วิธี: {dosomething: ฟังก์ชัน () console.log ("วิดเจ็ตคลิก");}}, อุปกรณ์ประกอบฉาก: ['thevalue']}) var vm = ใหม่ vue ({el: '#app', ข้อมูล: {ทดสอบ: "ทดสอบ"}, วิธี: {toDo: function () {console.log ( var vm_other = new vue ({el: '#app2', ข้อมูล: {ชื่อ: "First"}, วิธีการ: {toDo: function () {console.log ("นี่เป็นองค์ประกอบหลักอื่น")}}}); </script>ภาพประกอบ:
[1] สล็อตการกระจายถูกใช้ในองค์ประกอบหลักแรกและอุปกรณ์ประกอบฉากจะใช้เพื่อส่งผ่านค่า (ส่งผ่านค่าของการทดสอบไปยังค่าขององค์ประกอบเด็ก);
[2] ในบรรดาสององค์ประกอบหลังจากคลิกที่องค์ประกอบของเด็กวิธีการบางอย่างในวิธีการและจากนั้นเหตุการณ์บางอย่างในเหตุการณ์จะถูกดำเนินการ จากนั้นผ่านจุดเมานต์ @Some = "todo" เพื่อเชื่อมโยงเหตุการณ์บางอย่างของเด็กและวิธีการทำงานขององค์ประกอบของผู้ปกครองเข้าด้วยกัน
ดังนั้นหลังจากคลิกที่ส่วนประกอบลูกวิธีการทำสิ่งที่ต้องทำในที่สุดขององค์ประกอบหลักจะถูกดำเนินการในที่สุด
[3] การเปลี่ยนค่าที่ส่งผ่านไปยังส่วนประกอบลูกในองค์ประกอบหลักจะเปลี่ยนค่าของส่วนประกอบลูก (นั่นคือทั้งสองจะถูกผูกไว้กับข้อมูล);
ส่วนประกอบ③async:
ตามความเข้าใจของฉันเพียงแค่ใส่แอปพลิเคชันขนาดใหญ่มีหลายองค์ประกอบ แต่ส่วนประกอบบางอย่างไม่จำเป็นต้องโหลดทันทีดังนั้นพวกเขาจะถูกแบ่งออกเป็นหลายองค์ประกอบ (ตัวอย่างเช่นส่วนที่ต้องโหลดทันที แต่ไม่ทันที);
หากจำเป็นต้องโหลดทันทีจะดีกว่าที่จะใส่ไว้ในไฟล์เดียวกัน (หรือร้องขอร่วมกันในชุดเดียวกัน);
หากไม่จำเป็นต้องโหลดทันทีก็สามารถวางไว้ในไฟล์อื่น ๆ ได้ แต่เมื่อจำเป็น AJAX จะร้องขอไปยังเซิร์ฟเวอร์
คำขอต่อไปนี้เป็นส่วนประกอบแบบอะซิงโครนัส
ฟังก์ชั่นของ vue.js เป็นฟังก์ชั่นของ vue.js ซึ่งอนุญาตให้องค์ประกอบถูกกำหนดเป็นฟังก์ชั่นโรงงานและวิเคราะห์คำจำกัดความของส่วนประกอบแบบไดนามิก
สามารถใช้กับ webpack
สำหรับวิธีการใช้ในรายละเอียดฉันไม่ค่อยเข้าใจ ฉันไม่สามารถเขียนได้อย่างชัดเจนในบทช่วยสอนดังนั้นฉันจะวางมันไว้และรอให้มันศึกษาเมื่อจำเป็น
ลิงค์:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④การประชุมการตั้งชื่อ: การประชุม:
พูดง่ายๆคือแท็ก HTML (เช่น DIV และ DIV เหมือนกัน) และคุณสมบัติ (เช่นคำแนะนำในการเขียนเช่น V-ON แทน VON) เป็นตัวพิมพ์ใหญ่
ชื่อทรัพยากรมักจะเขียนในอูฐเหมือน (เช่นอูฐอูฐ) หรือในรูปแบบของตัวอักษรตัวพิมพ์ใหญ่ของตัวอักษรตัวแรกของคำ (เช่น pascalcase ฉันไม่รู้ว่าจะเรียกสิ่งนี้ แต่ฉันไม่ค่อยเขียนสิ่งนี้)
Vue.Component ("MyTemplate", {// ...... ละเว้น})Vue.js สามารถรับรู้สิ่งนี้และแปลงได้โดยอัตโนมัติ
<my-template> </my-template>
เทมเพลตด้านบนสามารถแทนที่แท็กนี้โดยอัตโนมัติ
⑤ส่วนประกอบ Recursive:
พูดง่ายๆคือองค์ประกอบแบบเรียกซ้ำเป็นส่วนประกอบที่ฝังเทมเพลตของตัวเองในตัวเอง
หากส่วนประกอบต้องการที่จะกลับมาอีกครั้งมันต้องการแอตทริบิวต์ชื่อและ Vue.Component มาพร้อมกับแอตทริบิวต์ชื่อของตัวเอง
อาจเป็นเช่นนี้
<div id = "app"> <my-template> </my-template> </div> <script> Vue.Component ("MyTemplate", {เทมเพลต: "<p> <my-template> </my-template> </p>"})นี่คือการเรียกซ้ำที่ไม่มีที่สิ้นสุดซึ่งเป็นไปไม่ได้อย่างแน่นอน ดังนั้นจึงจำเป็นต้องควบคุมจำนวนเลเยอร์ของการเรียกซ้ำตัวอย่างเช่นควบคุมการเรียกซ้ำผ่านข้อมูลและหยุดการเรียกซ้ำเมื่อข้อมูลว่างเปล่า
รหัสตัวอย่างมีดังนี้:
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </my-template> : a = "aa": b = "ab"> </my-template> </ul> ', props: ["a", "b"]}) var data = {a: {a: {a: {a: 0, b: 3}, b: 2}, b: 1} vu VM = new Vue += "!"; </script>ภาพประกอบ:
[1] เมื่อผ่านไปค่าของ A และค่าของ B จะถูกส่งผ่านอุปกรณ์ประกอบฉากโดยที่ค่าของ A ใช้เป็นแหล่งข้อมูลสำหรับค่าของ A และ B ของส่วนประกอบหลังจากการเรียกซ้ำ
จากนั้นตรวจสอบว่าค่าของการส่งผ่านไปยังองค์ประกอบแบบเรียกซ้ำนั้นมีอยู่หรือไม่และถ้าเป็นเช่นนั้นจะกลับมาอีกครั้งหรือไม่
หากค่าของ A ไม่มีอยู่การเรียกซ้ำจะหยุดลง
⑥ตัวอย่างตัวอย่าง:
เพียงแค่ใส่อินสแตนซ์ส่วนที่เรียกว่าหมายถึงเทมเพลตของส่วนประกอบไม่ได้อยู่ภายใต้โหนดรูท:
รหัสอินสแตนซ์แฟรกเมนต์:
Vue.Component ("MyTemplate", {เทมเพลต: '<div> 1 </div>' + '<div> 2 </div>',})อินสแตนซ์ที่ไม่ใช่เรื่องเล่า:
Vue.Component ("MyTemplate", {เทมเพลต: '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})คุณลักษณะของอินสแตนซ์ส่วนต่อไปนี้จะถูกละเว้น:
[1] คำแนะนำการควบคุมที่ไม่ใช่การประมวลผลเกี่ยวกับองค์ประกอบส่วนประกอบ (เช่นคำแนะนำ V-show ที่เขียนที่จุดเมานต์และควบคุมโดยองค์ประกอบหลัก แต่โปรดทราบว่า V-IF เป็นของคำแนะนำในการควบคุมกระบวนการ);
【 2 】คุณลักษณะที่ไม่ใช่การป้องกัน (โปรดทราบว่าอุปกรณ์ประกอบฉากจะไม่ถูกละเว้นนอกจากอุปกรณ์ประกอบฉากที่เขียนไว้บนจุดเมานต์);
[3] การเปลี่ยนแปลง (นั่นคือแอตทริบิวต์การเปลี่ยนแปลงจะถูกละเว้น);
สำหรับการอ้างอิงเพิ่มเติมเกี่ยวกับเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#u7247_U65AD_U5B9E_U4F8B
⑦อินไลน์เทมเพลต
ข้อมูลอ้างอิง: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
ด้านบนเป็นองค์ประกอบของ Vuejs บทที่ 13 ว่าตัวแก้ไขแนะนำให้คุณรู้จัก - รายการเบ็ดเตล็ด ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!