องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
ส่วนประกอบการใช้งาน
ลงทะเบียน
ดังที่ได้กล่าวไว้ก่อนหน้านี้เราสามารถสร้างตัวสร้างส่วนประกอบโดยใช้ vue.extend ():
var myComponent = vue.extend ({// ตัวเลือก ... })ในการใช้ตัวสร้างนี้เป็นส่วนประกอบคุณต้องลงทะเบียนด้วย `vue.Component (แท็ก, constructor)` **:
// ทั่วโลกลงทะเบียนส่วนประกอบแท็กคือ My-ComponentVue.Component ('My-Component', MyComponent)<p> vue.js ไม่ได้กำหนดกฎ W3C (ตัวพิมพ์เล็กและมีแถบสั้น ๆ ) สำหรับชื่อแท็กที่กำหนดเองแม้ว่าจะเป็นการดีกว่าที่จะทำตามกฎนี้
หลังจากลงทะเบียนส่วนประกอบแล้วสามารถใช้เป็นองค์ประกอบที่กำหนดเอง <องค์ประกอบของฉัน> ในโมดูลของอินสแตนซ์พาเรนต์ เพื่อให้แน่ใจว่าส่วนประกอบได้รับการลงทะเบียนก่อนเริ่มต้นอินสแตนซ์รูท:
<div id = "ตัวอย่าง"> <my-component> </my-component> </div> // define var myComponent = vue.extend ({template: '<div> องค์ประกอบที่กำหนดเอง!แสดงเป็น:
<div id = "ตัวอย่าง"> <div> องค์ประกอบที่กำหนดเอง! </div> </div>
โปรดทราบว่าเทมเพลตของส่วนประกอบแทนที่องค์ประกอบที่กำหนดเองและฟังก์ชั่นขององค์ประกอบที่กำหนดเองเป็นเพียงจุดเมานต์ คุณสามารถใช้ตัวเลือกอินสแตนซ์แทนที่เพื่อตัดสินใจว่าจะแทนที่หรือไม่
การลงทะเบียนท้องถิ่น
ไม่จำเป็นต้องลงทะเบียนแต่ละองค์ประกอบทั่วโลก สามารถใช้ได้เฉพาะในส่วนประกอบอื่น ๆ ลงทะเบียนกับส่วนประกอบตัวเลือกอินสแตนซ์:
var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({template: '... ', ส่วนประกอบ: {// <pomponent> สามารถใช้ในเทมเพลตองค์ประกอบหลัก 'My-Component': Child}}))การห่อหุ้มนี้ยังเหมาะสำหรับทรัพยากรอื่น ๆ เช่นคำแนะนำตัวกรองและการเปลี่ยนผ่าน
ลงทะเบียนน้ำตาลวากยสัมพันธ์
เพื่อให้เหตุการณ์ง่ายขึ้นคุณสามารถส่งผ่านวัตถุตัวเลือกโดยตรงแทนที่จะเป็นตัวสร้างไปยังตัวเลือก vue.Component () และส่วนประกอบ vue.js เรียก vue.extend () โดยอัตโนมัติด้านหลัง:
// ขยายและลงทะเบียน Vue.Component ('My-Component', {แม่แบบ: '<div> องค์ประกอบที่กำหนดเอง! </div>'}) // สิ่งนี้เป็นไปได้ด้วยการลงทะเบียนท้องถิ่น var parent = vue.extend ({ส่วนประกอบ: {'องค์ประกอบของฉัน': {เทมเพลต: '<div>ปัญหาตัวเลือกส่วนประกอบ
ตัวเลือกส่วนใหญ่ที่ส่งผ่านเข้าไปในตัวสร้าง Vue ยังสามารถใช้ใน vue.extend () แต่มีสองกรณีพิเศษ: ข้อมูลและ El ลองนึกภาพถ้าเราผ่านวัตถุเป็นตัวเลือกข้อมูลไปยัง vue.extend ():
var data = {a: 1} var myComponent = vue.extend ({data: data})ปัญหาเกี่ยวกับสิ่งนี้คืออินสแตนซ์ทั้งหมดของ MyComponent จะแบ่งปันวัตถุ 'data' เดียวกัน! นี่ไม่ใช่สิ่งที่เราต้องการดังนั้นเราควรใช้ฟังก์ชั่นเป็นตัวเลือก `data 'เพื่อส่งคืนวัตถุใหม่:
var myComponent = vue.extend ({data: function () {return {a: 1}}})ในทำนองเดียวกันตัวเลือก `el` จะต้องเป็นฟังก์ชั่นเมื่อใช้ใน` vue.extend () `
การวิเคราะห์แม่แบบ
เทมเพลตของ Vue เป็นเทมเพลต DOM ซึ่งใช้ตัวแยกวิเคราะห์ของเบราว์เซอร์แทนที่จะใช้งานด้วยตัวเอง เมื่อเปรียบเทียบกับเทมเพลตสตริงเทมเพลต DOM มีประโยชน์บางอย่าง แต่มีปัญหาและต้องเป็นตัวอย่าง HTML ที่ถูกต้อง องค์ประกอบ HTML บางอย่างมีข้อ จำกัด เกี่ยวกับองค์ประกอบที่สามารถวางไว้ข้างในได้ ข้อ จำกัด ทั่วไป:
• A ไม่สามารถมีองค์ประกอบแบบโต้ตอบอื่น ๆ ได้ (เช่นปุ่มลิงก์)
• UL และ OL สามารถรวม LI ได้โดยตรงเท่านั้น
•เลือกสามารถรวมตัวเลือกและ OptGroup เท่านั้น
•ตารางสามารถรวมหัว, tbody โดยตรง, tfoot, tr, คำอธิบาย, col, colgroup
• TR สามารถรวม TH และ TD ได้โดยตรงเท่านั้น
ในทางปฏิบัติข้อ จำกัด เหล่านี้สามารถนำไปสู่ผลลัพธ์ที่ไม่คาดคิด แม้ว่ามันอาจใช้งานได้ในบางกรณี แต่คุณไม่สามารถพึ่งพาส่วนประกอบที่กำหนดเองเพื่อขยายผลลัพธ์ก่อนการตรวจสอบเบราว์เซอร์ ตัวอย่างเช่น <select> <petion> ... </optup> </my-select> ไม่ใช่เทมเพลตที่ถูกต้องแม้ว่าส่วนประกอบของ My-Select จะขยายออกไปเป็น <elect> ... </electe>
ผลลัพธ์อีกอย่างหนึ่งคือแท็กที่กำหนดเอง (รวมถึงองค์ประกอบที่กำหนดเองและแท็กพิเศษเช่น <ponent>, <memplate>, <บางส่วน>) ไม่สามารถใช้ในแท็กที่มีข้อ จำกัด เกี่ยวกับองค์ประกอบภายในเช่น UL, Select, Table, ฯลฯ ที่กำหนดไว้ในองค์ประกอบเหล่านี้จะถูกกล่าวถึงนอกองค์ประกอบ
สำหรับองค์ประกอบที่กำหนดเองควรใช้แอตทริบิวต์ IS:
<bable> <tr คือ = "My-Component"> </tr> </table>
`` ไม่สามารถใช้ใน ``, `` ในเวลานี้ ``
อาจมีหลาย ``:
<table> <tbody v-for = "รายการในรายการ"> <tr> แม้กระทั่งแถว </tr> <tr> แถวคี่ </tr> </tbody> </table>
อุปกรณ์ประกอบฉาก
ผ่านข้อมูลโดยใช้อุปกรณ์ประกอบฉาก
ขอบเขตของอินสแตนซ์ส่วนประกอบเป็นเด็กกำพร้า ซึ่งหมายความว่าข้อมูลขององค์ประกอบหลักไม่สามารถและไม่ควรอ้างอิงโดยตรงภายในเทมเพลตขององค์ประกอบลูก คุณสามารถใช้อุปกรณ์ประกอบฉากเพื่อส่งผ่านข้อมูลไปยังส่วนประกอบเด็ก
"Prop" เป็นฟิลด์ของข้อมูลส่วนประกอบที่คาดว่าจะถูกส่งผ่านจากองค์ประกอบหลัก ส่วนประกอบเด็กจำเป็นต้องประกาศอุปกรณ์ประกอบฉากอย่างชัดเจนด้วยตัวเลือกอุปกรณ์ประกอบฉาก:
vue.Component ('child', {// ประกาศอุปกรณ์ประกอบฉากอุปกรณ์ประกอบฉาก: ['msg'], // prop สามารถใช้ในเทมเพลต // คุณสามารถใช้ `this.msg` ในการตั้งค่าเทมเพลต: '<span> {{msg}} </span>'})จากนั้นส่งผ่านสตริงปกติ:
<child msg = "hello!"> </vild>
Hump กับแถบแนวนอน
แอตทริบิวต์ HTML เป็นตัวพิมพ์ใหญ่ เมื่อเสาที่มีรูปแบบชื่อ Camelcase ถูกใช้เป็นคุณสมบัติจะต้องถูกแปลงเป็นเคบับเคส (แยกเส้นแนวนอนสั้น):
Vue.Component ('Child', {// camelcase ใน JavaScript Props: ['myMessage'], แม่แบบ: '<span> {{myMessage}} </span>'}) <!อุปกรณ์ประกอบฉากแบบไดนามิก
เช่นเดียวกับการใช้ V-bind เพื่อผูกแอตทริบิวต์ HTML เข้ากับนิพจน์คุณยังสามารถใช้ V-bind เพื่อผูกอุปกรณ์ประกอบฉากแบบไดนามิกกับข้อมูลขององค์ประกอบหลัก เมื่อใดก็ตามที่ข้อมูลของส่วนประกอบหลักเปลี่ยนไปก็จะถูกส่งไปยังส่วนประกอบลูก:
<div> <อินพุต v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </vild> </div>
การใช้ไวยากรณ์ตัวย่อของ `v-bind` มักจะง่ายกว่า:
<เด็ก: my-message = "parentmsg"> </vild>
ไวยากรณ์ตัวอักษรกับไวยากรณ์แบบไดนามิก
ข้อผิดพลาดทั่วไปสำหรับผู้เริ่มต้นคือการผ่านค่าตัวเลขโดยใช้ไวยากรณ์ตัวอักษร:
<!-ผ่านสตริง "1"->
<Comp Some-prop = "1"> </pomp>
เนื่องจากเป็นเสาที่แท้จริงค่าของมันจะถูกส่งผ่านในสตริง `" 1 "` แทนที่จะเป็นหมายเลขจริง หากคุณต้องการส่งหมายเลข JavaScript จริงคุณต้องใช้ไวยากรณ์แบบไดนามิกเพื่อให้ค่าของมันถูกคำนวณเป็นนิพจน์ JavaScript:
<!-ผ่านหมายเลขจริง->
<คอมพ์: some-prop = "1"> </comp>
ประเภทการผูกเสา
Prop คือการเชื่อมโยงทางเดียวโดยค่าเริ่มต้น: เมื่อคุณสมบัติของการเปลี่ยนแปลงส่วนประกอบของผู้ปกครองมันจะถูกส่งผ่านไปยังองค์ประกอบของเด็ก แต่วิธีอื่น ๆ จะไม่ นี่คือการป้องกันไม่ให้ส่วนประกอบเด็กสามารถแก้ไขสถานะขององค์ประกอบหลักได้โดยไม่ตั้งใจซึ่งจะทำให้การไหลของข้อมูลของแอปพลิเคชันยากที่จะเข้าใจ อย่างไรก็ตามมันยังเป็นไปได้ที่จะบังคับให้มีการเชื่อมโยงแบบสองทิศทางหรือการผูกมัดครั้งเดียวโดยใช้. SYNC หรือ. ONCE Binding Modifier:
ไวยากรณ์เปรียบเทียบ:
<!-ค่าเริ่มต้นคือการเชื่อมโยงทางเดียว-> <เด็ก: msg = "parentmsg"> </child> <!-การผูกมัดแบบสองทิศทาง-> <เด็ก: msg.sync = "parentmsg"> </vild> <!
การเชื่อมโยงแบบสองทิศทางซิงโครไนซ์แอตทริบิวต์ MSG ของส่วนประกอบลูกกลับไปที่แอตทริบิวต์ ParentMSG ขององค์ประกอบหลัก การผูกเดี่ยวจะไม่ซิงโครไนซ์การเปลี่ยนแปลงหลังจากการสร้าง
โปรดทราบว่าหากเสาเป็นวัตถุหรืออาร์เรย์มันจะถูกส่งผ่านโดยการอ้างอิง การปรับเปลี่ยนภายในองค์ประกอบของเด็กจะส่งผลกระทบต่อสถานะขององค์ประกอบหลักโดยไม่คำนึงถึงประเภทการผูกที่ใช้
การตรวจสอบเสา
ส่วนประกอบสามารถระบุข้อกำหนดการตรวจสอบสำหรับอุปกรณ์ประกอบฉาก สิ่งนี้มีประโยชน์เมื่อมีการมอบส่วนประกอบให้กับผู้อื่นเนื่องจากข้อกำหนดการตรวจสอบเหล่านี้เป็น API ของส่วนประกอบเพื่อให้มั่นใจว่าผู้อื่นใช้ส่วนประกอบอย่างถูกต้อง ในเวลานี้ค่าของอุปกรณ์ประกอบฉากเป็นวัตถุที่มีข้อกำหนดการตรวจสอบ:
Vue.Component ('ตัวอย่าง', {props: {// การตรวจจับประเภทพื้นฐาน (`null` หมายถึงประเภทใด ๆ ก็โอเค) propa: จำนวน, // หลายประเภท (1.0.21+) propm: [สตริง, ตัวเลข], // ที่จำเป็น ส่งคืนโดยฟังก์ชั่นไปยัง procd: {type: object, default: function () {return {msg: 'hello'}}}, // ระบุเสานี้เป็นสองทางที่มีผลผูกพัน // ถ้าประเภทการผูกไม่ถูกต้อง (ใหม่ใน 1.0.12) // แปลงค่าก่อนที่จะตั้งค่า propg ค่า: {coerce: function (val) {return val + '' // แปลงค่าเป็นสตริง}}, proph: {coerce: function (val) {return json.parse (val) //ประเภทสามารถเป็นตัวสร้างดั้งเดิมต่อไปนี้:
•สตริง
•ตัวเลข
•บูลีน
•การทำงาน
•วัตถุ
•อาร์เรย์
ประเภทยังสามารถเป็นตัวสร้างที่กำหนดเองที่ใช้การตรวจจับอินสแตนซ์
เมื่อการตรวจสอบ Prop ล้มเหลว Vue ปฏิเสธที่จะตั้งค่านี้บนองค์ประกอบของเด็กและคำเตือนจะถูกโยนลงหากใช้เวอร์ชันการพัฒนา
การสื่อสารองค์ประกอบของพ่อแม่ลูก
ลิงค์หลัก
ส่วนประกอบเด็กสามารถเข้าถึงส่วนประกอบพาเรนต์ด้วยสิ่งนี้ $ parent ลูกหลานของอินสแตนซ์รูทสามารถเข้าถึงได้ด้วยสิ่งนี้ $ root องค์ประกอบหลักมีอาร์เรย์นี้เด็ก $ ที่มีองค์ประกอบลูกทั้งหมด
แม้ว่าอินสแตนซ์ใด ๆ ในห่วงโซ่หลักสามารถเข้าถึงได้ แต่ส่วนประกอบของเด็กควรหลีกเลี่ยงการพึ่งพาข้อมูลขององค์ประกอบหลักโดยตรงและพยายามใช้อุปกรณ์ประกอบฉากเพื่อส่งผ่านข้อมูลอย่างชัดเจน นอกจากนี้ยังแย่มากที่จะปรับเปลี่ยนสถานะขององค์ประกอบหลักในองค์ประกอบเด็กเพราะ:
1. สิ่งนี้ช่วยให้องค์ประกอบหลักสามารถเชื่อมโยงอย่างใกล้ชิดกับส่วนประกอบลูก;
2. ถ้าคุณดูองค์ประกอบหลักเท่านั้นมันเป็นเรื่องยากที่จะเข้าใจสถานะขององค์ประกอบหลัก เพราะมันอาจถูกแก้ไขโดยองค์ประกอบของเด็ก! ตามหลักการแล้วส่วนประกอบเท่านั้นที่สามารถปรับเปลี่ยนสถานะของมันเอง
กิจกรรมที่กำหนดเอง
อินสแตนซ์ VUE ใช้อินเทอร์เฟซเหตุการณ์ที่กำหนดเองสำหรับการสื่อสารในแผนผังส่วนประกอบ ระบบเหตุการณ์นี้เป็นอิสระจากเหตุการณ์ DOM ดั้งเดิมและใช้มันแตกต่างกัน
แต่ละอินสแตนซ์ VUE เป็นทริกเกอร์เหตุการณ์:
•ใช้ $ on () เพื่อฟังเหตุการณ์;
•ใช้ $ emit () เพื่อเรียกเหตุการณ์ในนั้น
•ใช้ $ dispatch () เพื่อแจกจ่ายกิจกรรมและเหตุการณ์ฟองสบู่ตามห่วงโซ่แม่
•ใช้ $ broadcast () เพื่อออกอากาศกิจกรรมและเหตุการณ์จะถูกส่งลงไปยังลูกหลานทั้งหมด
เหตุการณ์ Vue จะหยุดฟองโดยอัตโนมัติหลังจากการเรียกกลับครั้งแรกจะถูกทริกเกอร์ระหว่างกระบวนการฟองเว้นแต่ว่าการโทรกลับจะส่งคืนจริงอย่างชัดเจน
ตัวอย่างง่ายๆ:
<!-เทมเพลตส่วนประกอบเด็ก-> <template id = "child-template"> <อินพุต v-model = "msg"> <ปุ่ม v-on: click = "แจ้งเตือน"> เหตุการณ์ส่ง </button> </template> <! JSON}} </p> <vild> </vild> </div> // ลงทะเบียนส่วนประกอบลูก // ส่งข้อความปัจจุบันออก vue.Component ('เด็ก', {เทมเพลต: '#child-template', data: function () {return {msg: 'hello'}}, วิธี: สิ่งนี้. $ dispatch ('child-msg', this.msg) this.msg = ''}}}}) // เริ่มต้นส่วนประกอบพาเรนต์ // ผลักเหตุการณ์ลงในอาร์เรย์เมื่อข้อความได้รับ var parent = new vue ({el: 'events-example', ข้อมูล: {ข้อความ: []} ฟังก์ชั่น (msg) {// `this` ในการโทรกลับเหตุการณ์จะถูกผูกไว้กับอินสแตนซ์โดยอัตโนมัติที่ลงทะเบียน this.messages.push (msg)}}})ใช้ v-on เพื่อผูกกิจกรรมที่กำหนดเอง
ตัวอย่างข้างต้นนั้นดีมาก แต่เราไม่สามารถดูได้ว่าเหตุการณ์ "child-MSG" มาจากรหัสขององค์ประกอบหลัก มันจะดีกว่าถ้าเราประกาศตัวจัดการเหตุการณ์ที่มีการใช้ส่วนประกอบย่อยในเทมเพลต สำหรับส่วนประกอบย่อยนี้คุณสามารถใช้ V-ON เพื่อฟังเหตุการณ์ที่กำหนดเอง:
<Child V-On: child-msg = "handleit"> </vild>
สิ่งนี้ทำให้ชัดเจน: เมื่อส่วนประกอบของเด็กทริกเกอร์เหตุการณ์ "child-MSG" จะมีการเรียกใช้วิธีการของส่วนประกอบของผู้ปกครอง รหัสทั้งหมดที่มีผลต่อสถานะขององค์ประกอบหลักจะถูกวางไว้ในวิธีการ `handleit 'ของส่วนประกอบของผู้ปกครอง ส่วนประกอบเด็กมุ่งเน้นไปที่เหตุการณ์ที่เกิดขึ้นเท่านั้น
ดัชนีส่วนประกอบย่อย
แม้จะมีอุปกรณ์ประกอบฉากและเหตุการณ์บางครั้งก็ยังจำเป็นต้องเข้าถึงส่วนประกอบเด็กโดยตรงใน JavaScript เพื่อจุดประสงค์นี้คุณสามารถใช้ V-Ref เพื่อระบุ ID ดัชนีสำหรับส่วนประกอบลูก ตัวอย่างเช่น:
<div id = "parent"> <ผู้ใช้โปรไฟล์ v-ref: โปรไฟล์> </ผู้ใช้-โปรไฟล์> </div> var parent = new vue ({el: '#parent'}) // การเข้าถึงส่วนประกอบลูก var child = parent. $ refs.profileเมื่อใช้ V-Ref และ V-For ร่วมกัน REF เป็นอาร์เรย์หรือวัตถุที่มีส่วนประกอบเด็กที่สอดคล้องกัน
ใช้สล็อตเพื่อแจกจ่ายเนื้อหา
เมื่อใช้ส่วนประกอบคุณมักจะต้องรวมกันเช่นนี้:
<APP> <APPHEADER> </PEADER> <APP-FOOTER> </APP-FOOTER> </App>
หมายเหตุสองจุด:
1. ส่วนประกอบ <app> ไม่ทราบว่าเนื้อหาใดจะอยู่ในจุดเมานต์ เนื้อหาของจุดเมานต์ถูกกำหนดโดยองค์ประกอบหลักของ <app>
2. ส่วนประกอบ <app> มีแนวโน้มที่จะมีเทมเพลตของตัวเอง
เพื่อให้ส่วนประกอบรวมกันเราจำเป็นต้องใช้วิธีผสมเนื้อหาขององค์ประกอบหลักกับเทมเพลตขององค์ประกอบเด็กเอง การประมวลผลนี้เรียกว่าการกระจายเนื้อหา (หรือ "การแปล" หากคุณคุ้นเคยกับ Angular) Vue.js ใช้ API การกระจายเนื้อหาที่อ้างถึงร่างข้อกำหนดส่วนประกอบของเว็บปัจจุบันและใช้องค์ประกอบพิเศษ <lot> เป็นสล็อตสำหรับเนื้อหาต้นฉบับ
ขอบเขตการรวบรวม
ก่อนที่จะดำน้ำใน API การกระจายเนื้อหาก่อนอื่นเราชี้แจงขอบเขตของการรวบรวมเนื้อหา สมมติว่าเทมเพลตคือ:
<องค์ประกอบเด็ก>
{{msg}}
</องค์ประกอบเด็ก>
ผงชูรสควรถูกผูกไว้กับข้อมูลขององค์ประกอบหลักหรือข้อมูลที่ผูกไว้กับส่วนประกอบลูกหรือไม่? คำตอบคือองค์ประกอบหลัก ขอบเขตส่วนประกอบเป็นเพียง:
เนื้อหาของเทมเพลตองค์ประกอบหลักถูกรวบรวมภายในขอบเขตขององค์ประกอบหลัก เนื้อหาของเทมเพลตองค์ประกอบเด็กถูกรวบรวมภายในขอบเขตขององค์ประกอบเด็ก
ข้อผิดพลาดทั่วไปคือพยายามผูกคำสั่งกับคุณสมบัติ/วิธีการขององค์ประกอบลูกภายในเทมเพลตองค์ประกอบหลัก:
<!-ไม่ถูกต้อง->
<ส่วนประกอบของเด็ก V-show = "SomeChildProperty"> </องค์ประกอบเด็ก>
สมมติว่า SomechildProperty เป็นทรัพย์สินขององค์ประกอบเด็กตัวอย่างข้างต้นจะไม่ทำงานตามที่คาดไว้ เทมเพลตองค์ประกอบหลักไม่ควรทราบสถานะขององค์ประกอบลูก
หากคุณต้องการผูกคำแนะนำในส่วนประกอบย่อยกับโหนดรูทของส่วนประกอบคุณควรทำสิ่งนี้ในเทมเพลต:
vue.Component ('องค์ประกอบเด็ก', {// ทำงานได้เพราะมันอยู่ในเทมเพลตขอบเขตที่ถูกต้อง: '<div v-show = "somechildProperty"> เด็ก </div>', data: function () {return {somechildProperty: true}}}))))))ในทำนองเดียวกันเนื้อหาการแจกแจงจะถูกรวบรวมภายในขอบเขตขององค์ประกอบหลัก
ช่องเดี่ยว
เนื้อหาขององค์ประกอบหลักจะถูกยกเลิกเว้นแต่เทมเพลตส่วนประกอบลูกมี <lot> หากเทมเพลตส่วนประกอบเด็กมีเพียงช่องเดียวที่ไม่มีคุณสมบัติเนื้อหาทั้งหมดของส่วนประกอบพาเรนต์จะถูกแทรกที่สล็อตอยู่และแทนที่
เนื้อหาของแท็ก <lot> ถือว่าเป็นเนื้อหาย้อนกลับ เนื้อหาทางเลือกถูกรวบรวมภายในขอบเขตขององค์ประกอบเด็กและเนื้อหาทางเลือกจะปรากฏขึ้นเมื่อองค์ประกอบโฮสต์ว่างเปล่าและไม่มีเนื้อหาสำหรับการแทรก
สมมติว่าองค์ประกอบขององค์ประกอบของฉันมีแม่แบบต่อไปนี้:
<div> <h1> นี่คือองค์ประกอบของฉัน! </h1> <lot> หากไม่มีการกระจายเนื้อหามันจะแสดงให้ฉันเห็น </lot> </div>
เทมเพลตองค์ประกอบหลัก:
<องค์ประกอบของฉัน>
<p> นี่คือเนื้อหาต้นฉบับ </p>
<p> นี่เป็นเนื้อหาต้นฉบับมากขึ้น </p>
</my-component>
ผลการแสดงผล:
<div> <h1> นี่คือส่วนประกอบของฉัน! </h1> <p> นี่คือเนื้อหาต้นฉบับบางส่วน </p> <p> นี่เป็นเนื้อหาต้นฉบับมากขึ้น </p> </div>
ชื่อสล็อต
องค์ประกอบ <lot> สามารถกำหนดค่าด้วยชื่อคุณสมบัติพิเศษเพื่อกำหนดค่าวิธีการแจกจ่ายเนื้อหา หลายช่องสามารถมีชื่อที่แตกต่างกัน สล็อตที่มีชื่อจะตรงกับองค์ประกอบในส่วนเนื้อหาที่มีแอตทริบิวต์สล็อตที่สอดคล้องกัน
ยังสามารถมีสล็อตที่ไม่ระบุชื่อซึ่งเป็นสล็อตเริ่มต้นเป็นช่องทางเลือกสำหรับการจับคู่ชิ้นส่วนเนื้อหาที่ไม่สามารถพบได้ หากไม่มีสล็อตเริ่มต้นชิ้นส่วนเนื้อหาที่ไม่มีใครเทียบเหล่านี้จะถูกยกเลิก
ตัวอย่างเช่นสมมติว่าเรามีองค์ประกอบการแทรกซึมหลายครั้งที่มีเทมเพลตเช่น:
<div> <slot name = "one"> </lot> <lot> </lot> <slot name = "Two"> </lot> </div>
เทมเพลตองค์ประกอบหลัก:
<multi-insertion> <p slot = "one"> หนึ่ง </p> <p slot = "สอง"> สอง </p> <p> ค่าเริ่มต้น A </p> </multi-insertion>
ผลการแสดงผลคือ:
<div> <p slot = "หนึ่ง"> หนึ่ง </p> <p> ค่าเริ่มต้น A </p> <p slot = "สอง"> สอง </p> </div>
API การกระจายเนื้อหาเป็นกลไกที่มีประโยชน์มากเมื่อรวมส่วนประกอบเข้าด้วยกัน
ส่วนประกอบแบบไดนามิก
ส่วนประกอบหลายส่วนสามารถใช้จุดเมานต์เดียวกันจากนั้นสลับระหว่างกันแบบไดนามิก ใช้องค์ประกอบ <Component> ที่สงวนไว้เพื่อผูกกับคุณสมบัติ IS แบบไดนามิก:
ใหม่ vue ({el: 'body', data: {currentView: 'home'}, ส่วนประกอบ: {หน้าแรก: {/ * ... */}, โพสต์: {/ * ... */}, เก็บถาวร: {/ * ... */}}}) <ส่วนประกอบ: คือ = "currentView"> <!เก็บรักษาไว้
หากส่วนประกอบที่สลับออกถูกเก็บไว้ในหน่วยความจำสามารถเก็บรักษาหรือแสดงผลอีกครั้ง ในการทำเช่นนี้คุณสามารถเพิ่มพารามิเตอร์คำสั่งที่มีชีวิตได้:
<ส่วนประกอบ: คือ = "CurrentView" Keep-Alive>
<!-ส่วนประกอบที่ไม่ได้ใช้งานจะถูกแคช->
</องค์ประกอบ>
เปิดใช้งาน Hook
เมื่อสลับส่วนประกอบการตัดเป็นส่วนประกอบอาจต้องใช้การดำเนินการแบบอะซิงโครนัสก่อนที่จะตัดลง ในการควบคุมระยะเวลาของการสลับส่วนประกอบให้เพิ่มตะขอเปิดใช้งานไปยังส่วนประกอบการตัด:
Vue.Component ('Activate-Example', {Activate: function (เสร็จแล้ว) {var self = loadDataAsync นี้ (ฟังก์ชั่น (data) {self.somedata = data data ()})}})โปรดทราบว่าการเปิดใช้งาน Hook จะทำหน้าที่เฉพาะในระหว่างการสลับส่วนประกอบแบบไดนามิกหรือการเริ่มต้นการเริ่มต้นส่วนประกอบแบบคงที่และไม่ได้ทำหน้าที่ในการแทรกด้วยตนเองโดยใช้วิธีการอินสแตนซ์
โหมดการเปลี่ยนแปลง
คุณลักษณะโหมดการเปลี่ยนแปลงใช้เพื่อระบุว่าการเปลี่ยนส่วนประกอบแบบไดนามิกสองแบบ
โดยค่าเริ่มต้นให้ป้อนและปล่อยให้การเปลี่ยนแปลงอย่างราบรื่น คุณสมบัตินี้สามารถระบุสองโหมดอื่น ๆ :
•เข้าออก: ส่วนประกอบใหม่เปลี่ยนเป็นครั้งแรกและหลังจากการเปลี่ยนแปลงเสร็จสิ้นส่วนประกอบปัจจุบันจะเปลี่ยนออก
• Out-in: ส่วนประกอบปัจจุบันจะเปลี่ยนเป็นครั้งแรกและหลังจากการเปลี่ยนแปลงเสร็จสิ้นการเปลี่ยนองค์ประกอบใหม่เป็นกระบวนการ
ตัวอย่าง:
<!-จางหายไปก่อนแล้วจึงจางหายไป-> <ส่วนประกอบ: IS = "View" Transition = "Fade" Transition-Mode = "Out-in"> </ponent> .Fade-Transition {Transition: Opacity .3เบ็ดเตล็ด
ส่วนประกอบและ v-for
ส่วนประกอบที่กำหนดเองสามารถใช้ V-for ได้โดยตรงเช่นองค์ประกอบปกติ:
<องค์ประกอบของฉัน v-for = "รายการในรายการ"> </my-component>
อย่างไรก็ตามข้อมูลไม่สามารถส่งผ่านไปยังส่วนประกอบได้เนื่องจากขอบเขตของส่วนประกอบเป็นเด็กกำพร้า เพื่อส่งผ่านข้อมูลไปยังส่วนประกอบควรใช้อุปกรณ์ประกอบฉาก:
<องค์ประกอบของฉัน
v-for = "รายการในรายการ"
: item = "item"
: index = "$ index">
</my-component>
เหตุผลที่รายการนั้นไม่ได้ถูกฉีดลงในส่วนประกอบโดยอัตโนมัติคือสิ่งนี้ทำให้ส่วนประกอบถูกจับคู่กับ V-FOR อย่างแน่นหนา ประกาศอย่างชัดเจนว่าข้อมูลมาจากไหนและสามารถนำกลับมาใช้ใหม่ได้ที่อื่นสำหรับส่วนประกอบ
การเขียนส่วนประกอบที่นำกลับมาใช้ใหม่ได้
เมื่อเขียนส่วนประกอบมันเป็นประโยชน์ที่จะจดจำว่าจะนำส่วนประกอบกลับมาใช้ใหม่หรือไม่ ไม่มีอะไรเกี่ยวข้องกับการมีเพศสัมพันธ์ที่แน่นหนาของส่วนประกอบที่ใช้แล้วทิ้งกับส่วนประกอบอื่น ๆ แต่ส่วนประกอบที่นำกลับมาใช้ใหม่ควรกำหนดอินเทอร์เฟซสาธารณะที่ชัดเจน
API ส่วนประกอบ vue.js มาจากสามส่วน: เสาเหตุการณ์และสล็อต:
• Prop อนุญาตให้สภาพแวดล้อมภายนอกส่งผ่านข้อมูลไปยังส่วนประกอบ
•เหตุการณ์อนุญาตให้ส่วนประกอบกระตุ้นการกระทำในสภาพแวดล้อมภายนอก
•สล็อตช่วยให้สภาพแวดล้อมภายนอกสามารถแทรกเนื้อหาลงในโครงสร้างมุมมองขององค์ประกอบ
การใช้ไวยากรณ์ตัวย่อของ V-bind และ V-on การเยื้องของแม่แบบมีความชัดเจนและรัดกุม:
<องค์ประกอบของฉัน
: foo = "baz"
: bar = "qox"
@Event-a = "Dothis"
@event-b = "dothat">
<!-เนื้อหา->
<img slot = "icon" src = "... ">>
<p slot = "ข้อความหลัก"> สวัสดี! </p>
</my-component>
ส่วนประกอบอะซิงโครนัส
ในแอพพลิเคชั่นขนาดใหญ่เราอาจต้องแยกแอปพลิเคชันออกเป็นชิ้นเล็ก ๆ และดาวน์โหลดจากเซิร์ฟเวอร์เฉพาะในกรณีที่จำเป็น เพื่อให้สิ่งต่าง ๆ ง่ายขึ้น vue.js ช่วยให้ส่วนประกอบถูกกำหนดเป็นฟังก์ชั่นโรงงานการแยกวิเคราะห์คำจำกัดความของส่วนประกอบแบบไดนามิก vue.js จะกระตุ้นฟังก์ชั่นโรงงานเท่านั้นเมื่อส่วนประกอบจำเป็นต้องแสดงผลและแคชผลลัพธ์สำหรับการแสดงใหม่ในภายหลัง ตัวอย่างเช่น:
Vue.Component ('Async-Example', ฟังก์ชั่น (แก้ไข, ปฏิเสธ) {settimeout (function () {redent ({template: '<div> ฉันเป็น async! </div>'})}, 1000)})ฟังก์ชั่นจากโรงงานได้รับการแก้ไขการเรียกกลับที่เรียกว่าเมื่อได้รับคำจำกัดความส่วนประกอบที่ดาวน์โหลดจากเซิร์ฟเวอร์ นอกจากนี้คุณยังสามารถโทรปฏิเสธ (เหตุผล) เพื่อระบุว่าการโหลดล้มเหลว ที่นี่ Settimeout เป็นเพียงการสาธิต มันขึ้นอยู่กับคุณทั้งหมดที่จะได้รับส่วนประกอบ ฟังก์ชั่นการแบ่งส่วนโค้ดที่แนะนำด้วย webpack:
vue.Component ('async-webpack-example', ฟังก์ชั่น (แก้ไข) {// ไวยากรณ์พิเศษนี้ต้องการ WebPack // แยกรหัสที่รวบรวมออกเป็นบล็อกโดยอัตโนมัติ // บล็อกเหล่านี้จะถูกดาวน์โหลดโดยอัตโนมัติผ่านคำขอ AJAXอนุสัญญาการตั้งชื่อทรัพยากร
ทรัพยากรบางอย่างเช่นส่วนประกอบและคำสั่งปรากฏในเทมเพลตเป็นแอตทริบิวต์ HTML หรือองค์ประกอบที่กำหนดเอง HTML เนื่องจากชื่อของแอตทริบิวต์ HTML และชื่อแท็กนั้นไม่ไวต่อตัวอักษรชื่อของทรัพยากรมักจะต้องใช้รูปแบบของเคบับ-เคสแทนอูฐซึ่งไม่สะดวกมาก
vue.js สนับสนุนชื่อของทรัพยากรในรูปแบบของ camelcase หรือ pascalcase และแปลงเป็นเคบับโดยอัตโนมัติในเทมเพลต (คล้ายกับอนุสัญญาการตั้งชื่อของเสา):
// ในองค์ประกอบนิยามส่วนประกอบ: {// ลงทะเบียน myComponent ด้วยรูปแบบอูฐ: {/ *... */}} <!-การใช้รูปแบบเคบับ-เคสในเทมเพลต-> <- คอมเมนต์ของฉัน> </my-Component> es6 ตัวอักษรตัวอักษรที่เป็นตัวอักษร './components/dropdown-menu'; export Default {ส่วนประกอบ: {// write <text-box> และ <dropdown-menu> กล่องข้อความ, dropdownmenu}}}ส่วนประกอบซ้ำ
ส่วนประกอบสามารถเรียกตัวเองว่าซ้ำภายในเทมเพลตของพวกเขา แต่เฉพาะในกรณีที่มีตัวเลือกชื่อ:
var stackoverflow = vue.extend ({ชื่อ: 'stack-overflow', เทมเพลต: '<div>' + // เรียกมันว่าซ้ำด้วยตัวเอง '<stack-overflow> </stack-overflow>' + '</div>'ส่วนประกอบข้างต้นจะทำให้เกิดข้อผิดพลาด "ขนาดสแต็กสูงสุดเกิน" ดังนั้นตรวจสอบให้แน่ใจว่าการโทรแบบเรียกซ้ำมีเงื่อนไขการเลิกจ้าง เมื่อส่วนประกอบลงทะเบียนทั่วโลกโดยใช้ Vue.Component () ID ส่วนประกอบจะถูกตั้งค่าโดยอัตโนมัติเป็นตัวเลือกชื่อของส่วนประกอบ
อินสแตนซ์แฟรกเมนต์
เมื่อใช้ตัวเลือกเทมเพลตเนื้อหาของเทมเพลตแทนที่องค์ประกอบการเมานต์ของอินสแตนซ์ ดังนั้นองค์ประกอบระดับบนสุดของเทมเพลตที่แนะนำจึงเป็นองค์ประกอบเดียวเสมอ
อย่าเขียนเทมเพลตแบบนี้:
<div> โหนดรูท 1 </div>
<div> รูทโหนด 2 </div>
ขอแนะนำให้เขียนสิ่งนี้:
<div>
ฉันมีโหนดรูทเดียว!
<div> โหนด 1 </div>
<div> โหนด 2 </div>
</div>
สถานการณ์ต่อไปนี้จะเปลี่ยนอินสแตนซ์เป็นอินสแตนซ์ที่แยกส่วน:
1. เทมเพลตมีองค์ประกอบระดับบนหลายระดับ
2. เทมเพลตมีข้อความปกติเท่านั้น
3. เทมเพลตมีส่วนประกอบอื่น ๆ เท่านั้น (ส่วนประกอบอื่น ๆ อาจเป็นอินสแตนซ์ชิ้นส่วน)
4. เทมเพลตมีเพียงหนึ่งคำสั่งองค์ประกอบเช่น <ส่วนบางส่วน> หรือ <เราเตอร์-วิว> ของ Vue-Router
5. โหนดรูทเทมเพลตมีคำสั่งควบคุมกระบวนการเช่น V-IF หรือ V-FOR
กรณีเหล่านี้อนุญาตให้อินสแตนซ์มีจำนวนองค์ประกอบระดับบนสุดที่ไม่รู้จักซึ่งจะถือว่าเนื้อหา DOM เป็นส่วน อินสแตนซ์แฟรกเมนต์ยังคงแสดงเนื้อหาอย่างถูกต้อง อย่างไรก็ตามมันไม่มีโหนดรูท, $ el ชี้ไปที่โหนดจุดยึดนั่นคือโหนดข้อความที่ว่างเปล่า (โหนดความคิดเห็นในโหมดการพัฒนา)
แต่ที่สำคัญกว่านั้นคือคำแนะนำการควบคุมที่ไม่ใช่การประมวลผลคุณสมบัติที่ไม่ใช่โปรปป
<!-ไม่เพราะไม่มีองค์ประกอบรูท->
<ตัวอย่าง v-show = "ตกลง" transition = "fade"> </exomple>
<!-อุปกรณ์ประกอบฉากใช่->
<ตัวอย่าง: prop = "somedata"> </expact>
<!-การควบคุมกระบวนการก็โอเค แต่ไม่มีการเปลี่ยนแปลง->
<ตัวอย่าง v-if = "ตกลง"> </expact>
แน่นอนว่าอินสแตนซ์ของชิ้นส่วนมีการใช้งาน แต่โดยปกติแล้วจะดีกว่าที่จะให้โหนดรูทส่วนประกอบ ช่วยให้มั่นใจได้ว่าคำแนะนำและประสิทธิภาพพิเศษเกี่ยวกับองค์ประกอบส่วนประกอบจะถูกแปลงอย่างถูกต้องและประสิทธิภาพก็ดีขึ้นเล็กน้อย
เทมเพลตแบบอินไลน์
หากส่วนประกอบเด็กมีคุณสมบัติแบบอินไลน์เทมเพลตส่วนประกอบจะถือว่าเนื้อหาเป็นเทมเพลตแทนการถือว่าเป็นเนื้อหาการแจกจ่าย สิ่งนี้ทำให้เทมเพลตมีความยืดหยุ่นมากขึ้น
<องค์ประกอบอินไลน์ของฉัน>
<p> สิ่งเหล่านี้รวบรวมเป็นเทมเพลตของส่วนประกอบ </p>
<p> ไม่ใช่เนื้อหาการแปลของผู้ปกครอง </p>
</my-component>
อย่างไรก็ตาม Inline-Template ทำให้ขอบเขตของแม่แบบยากที่จะเข้าใจและไม่สามารถแคชผลลัพธ์การรวบรวมแม่แบบ แนวปฏิบัติที่ดีที่สุดคือการใช้ตัวเลือกเทมเพลตเพื่อกำหนดเทมเพลตภายในส่วนประกอบ
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น