บทความนี้หมายถึงเอกสารอย่างเป็นทางการเพื่อรวบรวมรหัสที่มีรายละเอียดมากขึ้นและเป็นบทช่วยสอนที่ปลอดภัยยิ่งขึ้นสำหรับผู้เริ่มต้นในการอ่านและเรียนรู้
บทความนี้มาจากเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html
องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
คำจำกัดความส่วนประกอบ
①ฟังก์ชั่นของส่วนประกอบ:
【 1 】ขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้
【 2 】ส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vuejs สามารถเพิ่มฟังก์ชั่นพิเศษให้กับพวกเขา;
【 3 】ในบางกรณีส่วนประกอบสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมขยายในลักษณะที่เหมือน
②เขียนองค์ประกอบมาตรฐาน:
มันแบ่งออกเป็นขั้นตอนต่อไปนี้:
[1] สถานที่ที่ส่วนประกอบติดตั้งจะต้องเป็นองค์ประกอบ HTML ที่แสดงโดยอินสแตนซ์ VUE ตัวอย่างเช่นองค์ประกอบ HTML เช่น <div id =” แอป”> </div> ด้านบนและโหนดลูก
【 2 】กำหนดองค์ประกอบการใช้งาน
VAR ตัวแปรชื่อ = vue.extend ({เทมเพลต: "นี่คือเนื้อหาเทมเพลตของ html"}) ถูกสร้างขึ้นในรูปแบบของ "var btn = vue.extend ({เทมเพลต:" <putkle> นี่คือปุ่ม </button> "})【 3 】ลงทะเบียนส่วนประกอบที่กำหนดไว้ในอินสแตนซ์ VUE ซึ่งจะอนุญาตให้แท็กที่ระบุถูกแทนที่ด้วยเนื้อหาของส่วนประกอบ
เป็นรหัส:
// ลงทะเบียนเขาไปที่ Vue.Component ("Add-Button", BTN);โดยเฉพาะแต่ละแท็กต่อไปนี้ (ภายในขอบเขตของอินสแตนซ์รูทของ VUE)
<Add-Button> </dad-Button>
จะเป็น
<button> นี่คือปุ่ม </button>
แทนที่.
[4] วิธีการข้างต้นคือการลงทะเบียนทั่วโลก (แท็ก add-button ของแต่ละอินสแตนซ์ VUE จะถูกแทนที่ด้วยสิ่งที่เรากำหนด);
การแก้ปัญหาคือการลงทะเบียนในท้องถิ่น
ตัวอย่างเช่นรหัส: (นี่คือแอตทริบิวต์เทมเพลตคุณยังสามารถวางแท็ก <dal-button> </dad-button> ในแท็ก <div id = "แอป"> </div> เมื่อแอตทริบิวต์นี้ไม่พร้อมใช้งาน
<div id = "app"> </div> <script> // กำหนดส่วนประกอบ var btn = vue.extend ({template: "<button> นี่คือปุ่ม </button>"}) vue.component ("add-button", btn); // สร้างอินสแตนซ์รูทนั่นคือปล่อยให้ Vue มีผลกับรูท var vm = new Vue ({el: '#App', แม่แบบ: "<add-Button> </dal-Button>"}); </script>③องค์ประกอบการลงทะเบียนท้องถิ่น:
พูดง่ายๆก็มีผลเฉพาะกับอินสแตนซ์ VUE นี้เท่านั้น วิธีการเฉพาะคือข้ามขั้นตอนการลงทะเบียน
จากนั้นเมื่อประกาศอินสแตนซ์ VUE มันจะถูกเพิ่มลงในคุณสมบัติส่วนประกอบ (เป็นวัตถุที่วางไว้ในรูปแบบ KV) (โปรดทราบว่าคำนี้มีอีกหนึ่งคำ)
เป็นรหัส:
<div id = "app"> </div> <script> // กำหนดส่วนประกอบ var btn = vue.extend ({template: "<button> นี่คือปุ่ม </button>"}) // สร้างอินสแตนซ์รูทนั่นคือให้ Vue ใช้เอฟเฟกต์ "Add-Button": BTN}}); </script>บันทึก:
ตามการสอนอย่างเป็นทางการวิธีนี้ (อ้างอิงถึงการลงทะเบียนท้องถิ่น) ยังใช้กับทรัพยากรอื่น ๆ เช่นคำสั่งตัวกรองและการเปลี่ยนผ่าน
④ Simplify ขั้นตอน:
【 1 】การกำหนดส่วนประกอบและส่วนประกอบการลงทะเบียนจะเสร็จสมบูรณ์ในขั้นตอนเดียว:
// กำหนดส่วนประกอบ vue.Component ("Add-Button", {แม่แบบ: "<button> นี่คือปุ่ม </button>"});【 2 】ในระหว่างการลงทะเบียนท้องถิ่นขั้นตอนการกำหนดและการลงทะเบียนเสร็จสมบูรณ์:
// สร้างอินสแตนซ์รูทนั่นคือให้ Vue มีผลกับรูท var vm = new vue ({el: '#App', แม่แบบ: "<add-Button> </Add-Button>", ส่วนประกอบ: {"Add-Button": {template: "attributes data
เป็นไปไม่ได้ที่จะเพิ่มแอตทริบิวต์ข้อมูลโดยตรงไปยังส่วนประกอบ (ไม่ถูกต้อง);
เหตุผลก็คือหากทำเช่นนี้แอตทริบิวต์ข้อมูลของส่วนประกอบอาจเป็นวัตถุและวัตถุนี้อาจถูกส่งผ่านจากภายนอก (ตัวอย่างเช่นประกาศวัตถุก่อนจากนั้นวัตถุคือค่าของข้อมูล) ซึ่งอาจทำให้สำเนาทั้งหมดของส่วนประกอบแบ่งปันวัตถุ
ดังนั้นแอตทริบิวต์ข้อมูลควรเป็นฟังก์ชันและจากนั้นมีค่าส่งคืนซึ่งเป็นค่าของแอตทริบิวต์ข้อมูล
และค่าที่ส่งคืนนี้ควรเป็นวัตถุใหม่เอี่ยม (นั่นคือสำเนาลึกหลีกเลี่ยงส่วนประกอบหลายรายการที่แชร์วัตถุ);
เป็นรหัส:
var vm = new vue ({el: '#App', เทมเพลต: "<add-button> </add-button>", ส่วนประกอบ: {"add-button": {แม่แบบ: "<ปุ่ม> นี่คือปุ่ม {{btn}} </button>", data: function ()นอกจากนี้หากเป็นกรณีนี้ค่าของ BTN จะเหมือนกัน (เพราะพวกเขาแบ่งปันวัตถุจริง ๆ )
<div id = "app"> </div> <div id = "app2"> </div> <script> var obj = {btn: "123"}; var vm = new vue ({el: '#app', เทมเพลต: "<add-button> </add-button>", ส่วนประกอบ: {"add-button": {เทมเพลต: "<ปุ่ม> นี่คือปุ่ม {{btn}} obj.btn = "456"; var vm2 = new vue ({el: '#app2', เทมเพลต: "<add-button> </add-button>", ส่วนประกอบ: {"add-button": {เทมเพลต: "<ปุ่ม> นี่คือปุ่ม {{btn}} </script>บันทึก:
เมื่อแอตทริบิวต์ EL ถูกใช้ใน vue.extend () มันจะต้องเป็นฟังก์ชัน
⑥เป็นคุณสมบัติ:
[1] ตามการสอนอย่างเป็นทางการองค์ประกอบ HTML บางอย่างมีข้อ จำกัด เกี่ยวกับองค์ประกอบที่สามารถวางไว้ในนั้นได้
แต่อันที่จริงฉันไม่พบปัญหาใด ๆ กับการทดสอบของตัวเองดังนั้นฉันจึงไม่เข้าใจ
【 2 】ให้ URL แก่ฉันถ้ามีอะไรเกิดขึ้นจริงฉันจะศึกษามันกลับ
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
ข้างต้นคือการวิเคราะห์ตัวอย่างของคำจำกัดความขององค์ประกอบ VueJS ในบทที่ 8 ของ Vuejs ที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!