บทความนี้มาจากเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#props
บทช่วยสอนนี้เป็นบทช่วยสอนที่มีรายละเอียดและครอบคลุมมากขึ้นที่รวบรวมโดยบรรณาธิการร่วมกับเอกสารอย่างเป็นทางการซึ่งเหมาะอย่างยิ่งสำหรับผู้เริ่มต้นในการอ่าน
การส่งข้อมูลอุปกรณ์ประกอบฉาก
①scopeของอินสแตนซ์ส่วนประกอบ:
มันถูกแยกออกและใส่ง่ายค่าจะไม่ถูกแชร์ระหว่างส่วนประกอบแม้ว่าจะมีแอตทริบิวต์ของชื่อเดียวกัน
<div id = "app"> <dal> </add> <el> </el> </div> <script> var vm = new vue ({el: '#app', ส่วนประกอบ: {"เพิ่ม": {template: "<button> btn: {{btn}} </button>" เทมเพลต: "<button> btn: {{btn}} </button>", data: function () {return {btn: "456"};}}}}}); </script>ผลการแสดงผลคือ:
2 ปุ่มปุ่มแรกมีค่า 123 และปุ่มที่สองมีค่า 456 (แม้ว่าจะเป็น BTN)
②ใช้อุปกรณ์ประกอบฉากเพื่อผูกข้อมูลแบบคงที่:
[1] วิธีนี้ใช้ในการผ่านสตริงและค่าจะถูกเขียนลงในองค์ประกอบที่กำหนดเองขององค์ประกอบหลัก
【 2 】ตัวอย่างต่อไปนี้ไม่สามารถส่งผ่านค่าในแอตทริบิวต์ข้อมูลขององค์ประกอบหลัก
【 3 】มันจะเขียนทับค่าของชื่อเดียวกันในแอตทริบิวต์ข้อมูลของเทมเพลต
รหัสตัวอย่าง:
<div id = "app"> <เพิ่ม btn = "h"> </add> </div> <script> var vm = new vue ({el: '#app', data: {h: "hello"}, ส่วนประกอบ: {"เพิ่ม": {props: [btn ' {btn: "123"};}}}}); </script>ภายใต้วิธีการเขียนนี้มูลค่าของ BTN คือ H ไม่ใช่ 123 หรือสวัสดี
【 4 】วิธีการเขียนอูฐ
หากการแก้ไขเป็นอูฐ
ในแท็ก HTML เนื่องจากลักษณะของ HTML เป็นตัวพิมพ์ใหญ่ (เช่น LI และ LI เหมือนกัน) ค่าที่จะส่งผ่านในแท็ก HTML ควรเขียนเป็นเส้นแนวนอนสั้น (เช่น BTN-test) เพื่อให้มีความอ่อนไหว
ในอาร์เรย์อุปกรณ์ประกอบฉากควรสอดคล้องกับการแก้ไขและเขียนเป็นอูฐ (เช่น btntest)
ตัวอย่างเช่น:
อุปกรณ์ประกอบฉาก: ['btntest'], เทมเพลต: "<button> btn: {{btntest}} </button>"การเขียนที่ถูกต้อง:
<เพิ่ม btn-test = "h"> </dad>
หากการแก้ไขถูกเขียนในประเภทเส้นแนวนอนสั้นหรือแท็ก HTML ถูกเขียนในสไตล์อูฐมันจะไม่มีผลตามปกติ (เว้นแต่ว่าการแก้ไขจะไม่ถูกเขียนเป็นอูฐคอกขีด จำกัด เคส)
③การรับข้อมูลแบบไดนามิกโดยใช้อุปกรณ์ประกอบฉาก:
พูดง่ายๆคือการทำการแก้ไขส่วนประกอบเด็กที่สอดคล้องกับข้อมูลขององค์ประกอบหลัก
วิธีมาตรฐานในการเขียนคือ (ใช้ V-bind):
<เพิ่ม V-bind: ค่าของส่วนประกอบลูก = "คุณสมบัติของส่วนประกอบแม่"> </dad>
เป็นรหัส
<div id = "app"> <เพิ่ม v-bind: btn = "h"> </add> </div> </script> var vm = new vue ({el: '#app', ข้อมูล: {h: "hello"}, ส่วนประกอบ: {"เพิ่ม": {props: ['btn' {return {'btn': "123"}; </script>ภาพประกอบ:
【 1 】ค่า H ในข้อมูลส่วนประกอบหลักที่ใช้โดย BTN;
【 2 】ค่าการส่งคืนในฟังก์ชันของข้อมูลขององค์ประกอบเด็กถูกเขียนทับ
[3] กล่าวอีกนัยหนึ่งค่าขององค์ประกอบหลัก (ตามชื่อแอตทริบิวต์) ถูกใช้และค่าของฉลากจะใช้เป็นสตริง
【 4 】ยังคงต้องใช้อุปกรณ์ประกอบฉากมิฉะนั้นจะใช้ค่าของ BTN ในข้อมูล
④literalและ Dynamic ไวยากรณ์:
[1] เพียงแค่ใส่ถ้าคุณไม่เพิ่ม V-bind คุณผ่านปริมาณตามตัวอักษรนั่นคือคุณจะได้รับการปฏิบัติเป็นสตริง (ตัวอย่างเช่น 1 ยังเป็นสตริงไม่ใช่ประเภทตัวเลข);
【 2 】เพิ่ม V-bind การแสดงออกของ JS จะถูกส่งผ่าน (ดังนั้นค่าขององค์ประกอบหลักสามารถส่งผ่านได้);
【 3 】หลังจากเพิ่ม V-bind หากค่าของส่วนประกอบหลักสามารถพบได้แล้วค่าขององค์ประกอบหลักจะถูกใช้; หากไม่มีสิ่งใดที่สอดคล้องกันถือว่าเป็นนิพจน์ js (ตัวอย่างเช่น 1+2 ถือเป็น 3, {a: 1} ถือเป็นวัตถุ);
เป็นรหัส:
<div id = "app"> <เพิ่ม v-bind: btn = "1+2"> </add> </div> <script> var vm = new vue ({el: '#app', ข้อมูล: {h: "hello"}, ส่วนประกอบ: {"เพิ่ม": {props: [btn ' - </script>ค่าของ BTN ที่นี่คือ 3 (มากกว่า 1+2 เป็นสตริงโดยไม่ต้องเพิ่ม V-bind)
⑤ประเภทการผูกมัด:
[1] พูดง่ายๆมันถูกแบ่งออกเป็นสองประเภทคือการผูกทางเดียว (องค์ประกอบหลักสามารถส่งผลกระทบต่อองค์ประกอบของเด็ก แต่สิ่งที่ตรงกันข้ามก็เป็นไปไม่ได้) และการผูกสองทาง (องค์ประกอบเด็กอาจส่งผลกระทบต่อองค์ประกอบหลัก);
【 2 】ตัวอย่างการเชื่อมโยงทางเดียว: (ค่าเริ่มต้นหรือใช้. once)
<div id = "แอป"> ส่วนประกอบพาเรนต์: <อินพุต v-model = "val"> <br/> ส่วนประกอบเด็ก: <ทดสอบ V-bind: test-val = "val"> </test> </div> <script> var vm = new vue ({el: '#App', ข้อมูล: {val: 1}, ส่วนประกอบ: v-model = 'testVal'/> "}}}); </script>ภาพประกอบ:
เมื่อค่าขององค์ประกอบหลักมีการเปลี่ยนแปลงค่าขององค์ประกอบลูกก็จะเปลี่ยนแปลงเช่นกัน
เมื่อค่าขององค์ประกอบลูกมีการเปลี่ยนแปลงค่าขององค์ประกอบหลักจะไม่เปลี่ยนแปลง หากค่าขององค์ประกอบหลักได้รับการแก้ไขอีกครั้งส่วนประกอบลูกจะถูกซิงโครไนซ์อีกครั้ง
ควรสังเกตว่าหากองค์ประกอบของเด็กต้องการที่จะถูกผูกมัดแบบซิงโครนัสอินพุตขององค์ประกอบเด็กจะต้องเป็นโมเดล V ไม่ใช่แอตทริบิวต์ค่า (ซึ่งสามารถเชื่อมโยงรายการเดียวเท่านั้น
【 3 】การผูกมัดสองทาง:
".Sync" เป็นสิ่งจำเป็นในการดัดแปลง
เป็นตัวอย่าง:
<div id = "แอป"> ส่วนประกอบหลัก: <อินพุต v-model = "val"> <br/> ส่วนประกอบเด็ก: <ทดสอบ: test.sync = "val"> </test> </div> <script> var vm = new vue ({el: '#App', ข้อมูล: {val: 1} v-model = 'test'/> "}}}); </script>ผลกระทบคือไม่ว่าคุณจะเปลี่ยนค่าใด
【 4 】การตรวจสอบอุปกรณ์ประกอบฉาก:
พูดง่ายๆเมื่อส่วนประกอบได้รับข้อมูลจะใช้สำหรับการตรวจสอบและจะใช้เฉพาะเมื่อเงื่อนไขตรงตาม
วิธีการเขียนคือการเปลี่ยนอุปกรณ์ประกอบฉากให้เป็นวัตถุค่าที่ตรวจสอบแล้วเป็นกุญแจสำคัญของวัตถุและเงื่อนไขการตรวจสอบเป็นค่าที่สอดคล้องกับคีย์
ตัวอย่างเช่น:
อุปกรณ์ประกอบฉาก: {ทดสอบ: {twoway: true}},ตรวจสอบว่าตัวแปรทดสอบนั้นมีผลผูกพันแบบสองทิศทางและหากไม่เป็นเช่นนั้นจะมีการรายงานข้อผิดพลาด (โปรดทราบว่าสิ่งนี้ไม่สามารถใช้เพื่อตรวจสอบการผูกทางเดียว)
รหัสตัวอย่างมีดังนี้:
<div id = "แอป"> ส่วนประกอบพาเรนต์: <อินพุต V-model = "val"> <br/> ส่วนประกอบเด็ก: <ทดสอบ: ทดสอบ = "val"> </test> </div> <bar var vm = new Vue ({el: '#app', ข้อมูล: {val: 1}, ส่วนประกอบ: v-model = 'test'/> "}}}); </script>สำหรับประเภทการตรวจสอบเพิ่มเติมโปรดดูการสอนอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับขอบเขตส่วนประกอบและตัวอย่างการถ่ายโอนข้อมูลตัวอย่างของบทความที่เก้าของ VueJS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!