ما هي المكونات؟
المكون هو واحد من أقوى ميزات Vue.js. يمكن للمكونات تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام. على مستوى أعلى ، تعد المكونات عناصر مخصصة ، ويضيف برنامج التحويل البرمجي Vue.js ميزات خاصة إليه. في بعض الحالات ، يمكن أن تكون المكونات أيضًا في شكل عناصر HTML الأصلية ، وتم تمديدها مع ميزة IS.
محتوى توزيع الفتحات
① نظرة عامة:
ببساطة ، إذا كان المكون الأصل يحتاج إلى وضع بعض DOMs في مكون الطفل ، فسيتم عرض هذه الأدوار ، وليس عرضها ، حيث يتم عرضها ، وكيفية عرضها ، وهي مسؤولية توزيع الفتحات.
② بشكل افتراضي
لا يتم عرض محتويات المكون الأصل المرفق داخل المكون الطفل.
على سبيل المثال رمز:
<div id = "app"> <الأطفال> <span> 12345 </span> <!-لن يتم عرض السطر أعلاه-> </knids> </div> <script> var vm = new vue ({el: '#app' ، المكونات: {الأطفال: {// هذا ليس له قيمة إرجاع ، ولن يستمر القالب في التزويد: }}}) ؛ </script>محتوى العرض هو زر زر ، والذي لا يحتوي على المحتوى في علامة SPAN ؛
slot Single Slot
ببساطة ، إذا كنت تستخدم هذه العلامة فقط ، فيمكنك وضع المكون الأصل في محتوى المكون الطفل ووضعه في عرضه.
<div id = "app"> <fords> <span> 12345 </span> <!-لن يتم عرض السطر أعلاه-> </childs> </div> <script> var vm = new vue ({el: '#app' ، مكونات: {الأطفال: {// هذا ليس له قيمة إرجاع ، ولن يستمر القالب في الترتيب: الإجراء ، استخدم علامة الزر </button> "}}}) ؛ </script>على سبيل المثال ، إذا كتبت هذا ، فإن النتيجة هي:
<utton> <span> 12345 </span> لتوضيح نطاق الإجراء ، استخدم علامة الزر </button>
أي أن محتويات المكون الأصل الموضوعة في المكون الطفل يتم إدراجها في موضع <Slot> </slot> لمكون الطفل ؛
لاحظ أنه حتى إذا كانت هناك علامات متعددة ، فسيتم إدراجها معًا ، والتي تعادل استبدال علامة </slot> مع العلامة الموضوعة في مكون الطفل.
④ اسمه الفتحة
ضع علامات HTML المختلفة الموضوعة في الفرعية في مواقع مختلفة
يضيف المكون الأصل سمة الفتحة = "الاسم" إلى العلامة المراد توزيعها
يضيف مكون الطفل سمة الاسم = "اسم الاسم" في علامة الفتحة لموقع التوزيع المقابل ، ثم يضع العلامة المقابلة في الموقع المقابل.
نموذج الرمز:
<div id = "app"> <الأطفال> <span slot = "first"> 12345 </span> <span slot = "second"> 56789 </span> <!-لن يتم عرض السطر أعلاه-> </child> <// div> <script> vm = new vue ( الموزعة: "<button> <slot name = 'first'> </slot> من أجل توضيح نطاق الإجراء ، <slot name = 'second'> </slot> لذا استخدم علامة الزر </button>"}}}) ؛ </script>
يتم عرض النتيجة على النحو التالي: (من أجل راحة المشاهدة ، تم تعديل كسر الخط يدويًا)
<utton> <span slot = "first"> 12345 </span> لتوضيح نطاق الإجراء ، <span slot = "second"> 56789 </span> لذا استخدم علامة الزر </button>
⑤scope من محتوى التوزيع:
يتم تحديد نطاق المحتوى الموزع بناءً على القالب الذي يوجد فيه. على سبيل المثال ، يتم التحكم في العلامة أعلاه بواسطة قالب المكون الأصل (على الرغم من أنه يتم تضمينه بواسطة العلامة الفرعية لمكون الطفل ، ولكن نظرًا لأنه لا في سمة القالب للمكون الطفل ، فإنه لا ينتمي إلى المكون الطفل) ، فهو يتم التحكم فيه بواسطة المكون الأصل.
نموذج الرمز:
<div id = "app"> <أطفال> <span slot = "first" @click = "tobeknow"> 12345 </span> <span slot = "second"> 56789 </span> <! console.log ("إنها طريقة الوالدين") ؛ </script>عندما يتم النقر فوق منطقة النص 12345 (بدلاً من الأزرار كلها) ، يتم تشغيل طريقة ToBekNow للمكون الأصل.
ولكن عند النقر على مناطق أخرى ، لا يوجد أي تأثير.
يقول البرنامج التعليمي الرسمي هذا:
يتم تجميع محتوى قالب المكون الأصل ضمن نطاق المكون الأصل ؛ يتم تجميع محتوى قالب مكون الطفل في نطاق المكون الطفل
⑥ نصائح عندما لا يكون هناك محتوى موزعة:
إذا كان المكون الأصل لا يضع علامة في مكون الطفل ، أو يضع المكون الأصل علامة في مكون الطفل ، ولكن يحتوي على سمة فتحة ، ولا يحتوي مكون الطفل على علامة على سمة الفتحة.
ثم ، لن تلعب علامة الفتحة لمكون الطفل أي دور.
ما لم يكن هناك محتوى في علامة الفتحة ، سيتم عرض المحتوى الموجود في علامة الفتحة عند عدم توزيع محتوى.
كما في رمز المثال:
<div id = "app"> <الأطفال> <span slot = "first"> 【12345】 </span> <!-لن يتم عرض السطر أعلاه-> </knids> </viv> <script> var vm = new vue ({el: '#app' ، المكونات: {الأطفال: name = 'first'> <button> 【إذا لم يكن هناك محتوى ، فسوف يظهر لي 1】 </button> </slot> من أجل توضيح نطاق الإجراء ، <slot name = 'last'> <button> 【إذا لم يكن هناك محتوى ، فسوف يظهر لي 2】 <///////slot> استخدم علامة الزر </div> "}}}}}} </script>يوضح:
【1】 يتم استبدال علامة الفتحة مع Name = 'First' بالعلامة المقابلة للمكون الأصل (يتم التخلص من المحتوى الموجود داخل علامة الفتحة) ؛
【2】 علامة الفتحة من الاسم = 'last' ، لأنه لا يوجد محتوى مقابل ، سيتم عرض المحتوى الموجود داخل علامة الفتحة.
⑦ إذا كنت ترغب في التحكم في خصائص علامة الجذر للمكون الفرعي
[1] أولاً وقبل كل شيء ، نظرًا لأن علامة القالب تنتمي إلى المكون الأصل ، فليس من الممكن ربط تعليمات مكون الطفل بعلامة القالب (لأنها تنتمي إلى المكون الأصل) ؛
[2] إذا كنت بحاجة إلى التحكم في ما إذا كان يتم عرض مكون الطفل (مثل V-IF أو V-Show) من خلال المكون الأصل ، فمن الواضح أن هذا التوجيه ينتمي إلى المكون الأصل (مثل الموضوعة تحت بيانات المكون الأصل). يمكن كتابة العلامات على قالب مكون الطفل.
كرمز:
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <الأطفال v-if = "abc"> </childres الأطفال: {// هذا ليس له قيمة إرجاع ، قالب: "<viv> هذا مكون طفل </div>"}}}) ؛ </script>يوضح:
تحكم في ما إذا كان يتم عرض مكون الطفل من خلال المكون الأصل (انقر فوق الزر لتبديل قيمة تعليمات V-IF).
[3] إذا كنت بحاجة إلى التحكم في ما إذا كان يتم عرض مكون الطفل (على سبيل المثال ، دعه يختبئ) ، فمن الواضح أن هذه التعليمات تنتمي إلى مكون الطفل (سيتم وضع القيمة تحت سمة البيانات للمكون الطفل) ، ثم لا يمكن كتابتها على النحو الوارد أعلاه ، ولكن يجب وضعها في ملصق الجذر للمكون الطفل.
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <أطفال> <span slot = "first"> 【12345】 </span> <! هذا. $ الأطفال [0]. tohidden = true ؛ {this.tohidden =! this.tohidden ؛ </script>يوضح:
إن النقر على مكون الطفل سيجعل مكون الطفل يختفي ؛
انقر فوق زر المكون الأصل لإعادة تشغيل مكون الطفل عن طريق تغيير خاصية Tohidden لمكون الطفل.
ترتبط تعليمات مكون الطفل بقالب مكون الطفل (يمكن استدعاء هذا) ؛
ما سبق هو شرح مفصل لمثال توزيع محتوى الفتحة لمكون Vuejs الحادي عشر الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!