บทความนี้เป็นบทช่วยสอนที่มีรายละเอียดและครอบคลุมมากขึ้นที่รวบรวมโดยบรรณาธิการร่วมกับเอกสารอย่างเป็นทางการ มันดีมากและเหมาะสำหรับผู้เริ่มต้นที่จะอ่าน
บทความนี้มาจากเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#u7236_U5B50_U7EC4_U4EF6_U901A_U4FE1
การสื่อสารองค์ประกอบของพ่อแม่ลูก
①เข้าถึงส่วนประกอบเด็กส่วนประกอบหลักและส่วนประกอบรูท
สิ่งนี้. $ parent Access Component
นี่ $ เด็กเข้าถึงส่วนประกอบเด็ก (เป็นอาร์เรย์)
สิ่งนี้ $ root descendant ของอินสแตนซ์รูทเข้าถึงอินสแตนซ์รูท
รหัสตัวอย่าง:
<div id = "แอป"> ส่วนประกอบพาเรนต์: <อินพุต v-model = "val"> <br/> ส่วนประกอบเด็ก: <ทดสอบ: ทดสอบ = "val"> </test> </div> <bar var vm = new Vue ({el: '#App', ข้อมูล: {val: 1} v-model = 'test'/> ", วิธีการ: {findParent: function () {console.log (นี่. $ parent); // เข้าถึงส่วนประกอบรูทคอนโซล log (นี่ $ parent.val); // เข้าถึงส่วนประกอบของส่วนประกอบของรูท // ตรวจสอบว่าองค์ประกอบหลักและส่วนประกอบรูทมีความสอดคล้องกันหรือไม่ (เพราะองค์ประกอบหลักของมันคือองค์ประกอบรูท)}}}}}}); </script>เมื่อคีย์ปรากฏขึ้นในกล่องอินพุตขององค์ประกอบย่อยเนื้อหาที่แสดงคือ:
ค่าของกล่องอินพุตของส่วนประกอบพาเรนต์และองค์ประกอบหลัก (ค่าเริ่มต้นคือ 1), 0 (แสดงว่ามันเป็นองค์ประกอบแรกในแอตทริบิวต์ลูกขององค์ประกอบหลัก) และจริง (เพราะองค์ประกอบหลักเป็นองค์ประกอบรูทมันสอดคล้องกัน);
ด้วยวิธีนี้การโต้ตอบสามารถทำได้ในแผนผังส่วนประกอบ
②เหตุการณ์ที่กำหนด:
ก่อนอื่นเหตุการณ์จะต้องวางไว้ในคุณสมบัติเหตุการณ์มากกว่าในคุณสมบัติวิธีการ (ความผิดพลาดที่สามเณรมีแนวโน้มที่จะทำ) พวกเขาสามารถเรียกใช้เหตุการณ์ในคุณสมบัติเหตุการณ์ในขณะที่เหตุการณ์ในคุณสมบัติวิธีการไม่สามารถเรียกใช้
ประการที่สองมีความแตกต่างระหว่างการแจกแจงขึ้นด้านบนและการออกอากาศลง: การแจกแจงขึ้นไปจะก่อให้เกิดเหตุการณ์ที่มีชื่อเดียวกันในขณะที่การออกอากาศลงจะไม่;
ประการที่สามการกระจายตัวขึ้นและการออกอากาศลงจะกระตุ้นเหตุการณ์สำหรับสายตรง (เด็กหรือผู้ปกครองไม่รวมบรรพบุรุษและหลาน) โดยค่าเริ่มต้นและจะดำเนินต่อไปในบรรทัดนี้เว้นแต่ว่าค่าคืนเหตุการณ์จะเป็นจริง
ประการที่สี่เหตุการณ์ไม่สามารถเรียกได้อย่างชัดเจนผ่านเรื่องนี้ ชื่อเหตุการณ์
รหัสตัวอย่าง:
<div id = "แอป"> ส่วนประกอบหลัก: <button @click = "parentclick"> คลิกเพื่อเผยแพร่การออกอากาศลงไปด้านล่าง </button> <br/> ส่วนประกอบเด็ก 1: <เด็ก 1> </children1> <br/> ส่วนประกอบลูกอื่น 1: <อื่น ๆ {ParentClick: function () {สิ่งนี้. $ broadcast ("ParentClick", "ABC"); ไม่มีค่าส่งคืนและจะไม่ถูกแจกจ่ายอุปกรณ์ประกอบฉากต่อไป: ['Test'], แม่แบบ: "<button> เด็ก 1 </butd> </br> องค์ประกอบย่อย 2: <เด็ก 2> </children2>, เหตุการณ์: {childrenclick: function () {console.log ( console.log ("parentclick-children1"); {childrenclick: function () {console.log ("childrenclick-children2"); จริงและมันจะยังคงแจกจ่ายอุปกรณ์ประกอบฉากไปยังส่วนประกอบเด็กของส่วนประกอบเด็ก: ['test'], แม่แบบ: "<dother> อีกคน ParentClick: ฟังก์ชั่น (msg) {console.log ("ParentClick-Anotherchildren2"); {สิ่งนี้ $ dispatch ('childrenclick'); - - - -ภาพประกอบ:
【 1 】คลิกปุ่มขององค์ประกอบหลักและมันจะออกอากาศลงไปแล้วทริกเกอร์องค์ประกอบเด็ก 1 ตัวเองส่วนประกอบเด็กอีกชิ้น 1 และส่วนประกอบลูกอื่น 2;
【 2 】การคลิกปุ่มของส่วนประกอบเด็ก 2 จะทำให้เกิดเหตุการณ์ของส่วนประกอบลูก 2 และเหตุการณ์ขององค์ประกอบเด็ก 1 แต่จะไม่เรียกปุ่มองค์ประกอบหลัก
【 3 】การคลิกปุ่มของส่วนประกอบลูกอื่น 2 จะทำให้เกิดเหตุการณ์ขององค์ประกอบลูกอื่น 2 เหตุการณ์ขององค์ประกอบลูกอื่น 1 และเหตุการณ์ขององค์ประกอบหลัก (เนื่องจากค่าส่งคืนของเหตุการณ์ขององค์ประกอบเด็กอื่น 1 เป็นจริง);
③ใช้ v-on เพื่อผูกกิจกรรมที่กำหนดเอง:
[1] ใส่ง่ายๆเมื่อส่วนประกอบเด็กทริกเกอร์เหตุการณ์ (วิธีการในเหตุการณ์) องค์ประกอบหลักจะดำเนินการวิธีการ (วิธีการในวิธีการองค์ประกอบหลัก)
[2] การเชื่อมโยงที่ถูกทริกเกอร์เขียนไว้ในเทมเพลต (นั่นคือเทมเพลตเทมเพลตที่ถูกแทนที่) ส่วนประกอบของเด็กหลายตัวสามารถผูกเมธอดพาเรนต์หรือส่วนประกอบลูกที่แตกต่างกันสามารถผูกเมธอดองค์ประกอบหลักที่แตกต่างกันได้ แต่เหตุการณ์ส่วนประกอบลูกเดียวกันไม่สามารถผูกเมธอดได้
【 3 】ส่วนประกอบลูกส่งพารามิเตอร์สำหรับการส่งข้อความ แม้ว่าเหตุการณ์ของส่วนประกอบลูกจะไม่มีพารามิเตอร์ แต่ก็ไม่ส่งผลกระทบต่อวิธีการส่งพารามิเตอร์ไปยังองค์ประกอบหลัก (นั่นคือวิธีการขององค์ประกอบหลักสามารถยอมรับพารามิเตอร์ที่ได้จากวิธีองค์ประกอบลูก)
เป็นตัวอย่าง:
<div id = "แอป"> ส่วนประกอบหลัก: <pution> คลิกเพื่อเผยแพร่การออกอากาศ </button> <br/> ส่วนประกอบลูก 1: <!-การเชื่อมโยงถูกเขียนไว้ที่นี่ การผูกหลายครั้งสามารถผูกมัดกับหนึ่งหรือการผูกที่แตกต่างกันแตกต่างกัน แต่หลายไม่สามารถผูกมัดกับหนึ่ง-> <เด็ก v-on: test = "parent" @test2 = "อื่น"> </children> </div> <script> var vm = new vue ({el: '#App', ข้อมูล: {val: 1}, วิธีการ: เหตุการณ์ ");}, อีกอย่าง: ฟังก์ชั่น () {console.log (" วิธีอื่น ");}}, ส่วนประกอบ: {เด็ก: {// สิ่งนี้ไม่มีค่าคืนและจะไม่แจกจ่ายอุปกรณ์ประกอบฉาก: ['test'], แม่แบบ:" <button @click = 'childClick'> childclick: function () {this. $ emit ("test", 'การโต้แย้งสำหรับ dispatch'); - </script>④ดัชนีองค์ประกอบย่อย
เพียงแค่ใส่: คุณสามารถรับส่วนประกอบย่อยโดยตรงจากดัชนีแล้วคุณสามารถเรียกวิธีการของแต่ละคอมโพเนนต์ย่อย
วิธีการเพิ่มดัชนีคือ: เพิ่ม v-ref ลงในแท็ก: ชื่อดัชนี
วิธีการเรียกส่วนประกอบคือ: vm. $ ref ชื่อดัชนี
คุณยังสามารถใช้สิ่งนี้ได้ $ ref ชื่อดัชนีโดยตรงในองค์ประกอบหลัก
ในเวลานี้คุณสามารถรับส่วนประกอบจากนั้นส่วนประกอบสามารถเรียกวิธีการหรือใช้ข้อมูล
รหัสตัวอย่าง:
<div id = "แอป"> ส่วนประกอบพาเรนต์: <button @click = "toDo"> เหตุการณ์ทริกเกอร์ส่วนประกอบลูก </pution> <br/> องค์ประกอบย่อย 1: <!-การเชื่อมโยงถูกเขียนไว้ที่นี่ การผูกหลายครั้งสามารถผูกมัดกับหนึ่งหรือการผูกที่แตกต่างกันแตกต่างกัน แต่หลายไม่สามารถผูกมัดกับหนึ่ง-> <เด็ก v-ref: เด็ก> </viles> </div> <script> var vm = new vue ({el: '#app', วิธี: {toDo: function () เด็ก ๆ : {// สิ่งนี้ไม่มีค่าส่งคืนและจะไม่แจกจ่ายอุปกรณ์ประกอบฉากต่อไป: ['test'], แม่แบบ: "<button> เด็ก 1 </ปุ่ม>", วิธีการ: {fromparent: function () {console.log ( </script>ข้างต้นคือ VueJS บทความ 10th Vuejs การสื่อสารส่วนประกอบของลูก-ลูกแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!