ما هي المكونات؟
المكون هو واحد من أقوى ميزات Vue.js. يمكن للمكونات تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام. على مستوى أعلى ، تعد المكونات عناصر مخصصة ، ويضيف برنامج التحويل البرمجي Vue.js ميزات خاصة إليه. في بعض الحالات ، يمكن أن تكون المكونات أيضًا في شكل عناصر HTML الأصلية ، وتم تمديدها مع ميزة IS.
هذه المقالة عبارة عن شرح أكثر تفصيلاً تم تجميعه بواسطة المحرر بناءً على المستندات الرسمية. الكود أكثر اكتمالا وكمراً ، وهو مناسب للغاية للمبتدئين للتعلم.
الوثائق الرسمية:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
المكونات الديناميكية موصوفة أدناه:
①simple:
وهذا يعني أنه يتم وضع عدة مكونات تحت نقطة التثبيت ، ثم يقررون أي واحد سيتم عرضه بناءً على متغير من المكون الأصل ، أو لا يتم عرض أي منها.
② التبديل الديناميكي:
استخدم علامة المكون في نقطة التثبيت ثم استخدم v-bind: is = "اسم المكون" للعثور تلقائيًا على اسم مكون المطابقة. إذا لم يكن الأمر كذلك ، فلن يتم عرضه ؛
لتغيير المكون المثبت ، تحتاج فقط إلى تعديل قيمة IS التوجيه.
كما في رمز المثال:
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <component v-bind: is = "thing_to_show"> </compent [First "،" Second "،" Third "،" المكون 1 </viv> "} ، ثانياً: {// قالب مكون الطفل الثاني:" <viv> هنا هو مكون الطفل 2 </viv> "} ، ثالث: {// القالب المكون للطفل الثالث:" <viv> هنا مكون الطفل 3 </viv> "} ،}}) ؛ </script>يوضح:
سيتم تبديل النقر فوق زر المكون الأصل تلقائيًا لعرض مكون طفل (تم تحديده بناءً على قيمة المتغير الذي).
③ الحفاظ على الحافة
ببساطة ، تتم إزالة المكون الذي تم تبديله (لم يتم عرضه حاليًا) مباشرة.
عند النظر إلى هذا. سمة الأطفال $ في المكون الأصل ، يمكنك أن تجد أنه عند وجود مكون الطفل ، يكون طول السمة 1 ، وعندما لا يكون المكون الطفل ، يكون طول السمة 0 (لا يمكن الحصول على مكون الطفل) ؛
إذا احتاج مكون الطفل إلى تبديله ، فلا يزال هناك حاجة لإبقائه في الذاكرة لتجنب إعادة تقديمه عندما يظهر في المرة القادمة. ثم يجب عليك إضافة سمة keep-alive إلى علامة المكون.
كرمز:
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <component v-bind: عرض arr = ["الأول" ، "ثالث" ، " قالب مكون الطفل الأول: "<viv> هنا هو مكون الطفل 1 </viv>"} ، ثانياً: {// قالب مكون الطفل الثاني: "<viv> هنا هو مكون الطفل 2 </iv>"} ، ثالثًا: {// القالب المكون للطفل الثالث: "<viv> هنا مكون الطفل 3 </div>" ،} ،}} </script>يوضح:
في الحالة الأولية ، لا يوجد سوى عنصر واحد (المكون الأول) في سمة VM. $ للأطفال. بعد النقر فوق الزر للتبديل ، هناك عنصرين في سمة VM. $ Children. بعد التبديل مرة أخرى ، هناك ثلاثة عناصر (يتم الاحتفاظ جميع العناصر الفرعية الثلاثة في الذاكرة).
بعد ذلك ، بغض النظر عن كيفية التبديل ، سيكون هناك ثلاثة عناصر.
④ تنشيط الخطاف
ببساطة ، هو التحميل كسول.
على سبيل المثال ، عند بدء طلب Ajax ، نحتاج إلى الانتظار لبعض الوقت. إذا احتجنا إلى تحميل طلب AJAX بعد اكتماله ، فسنحتاج إلى استخدام خطاف التنشيط.
من حيث الاستخدام المحدد ، فإن Activate هو سمة في نفس مستوى السمات مثل القالب والبيانات. النموذج هو وظيفة. هناك معلمة في الوظيفة افتراضيًا. هذه المعلمة هي وظيفة. سيتم تبديل المكون فقط عند تنفيذ هذه الوظيفة.
لإثبات التحميل الخاص به ، على جانب الخادم ، قمت بتعيين أنه عند بدء طلب Ajax معين ، سيؤخر ثانيتين قبل إرجاع المحتوى. لذلك ، عند تبديل المكون 2 لأول مرة ، تحتاج إلى الانتظار لمدة ثانيتين قبل التبديل بنجاح:
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <component v-bind: is = "thing_to_show"> </compent [First "،" Second "،" " القالب: "<div> هنا هو مكون الطفل 1 </viv>"} ، ثانياً: {// قالب مكون الطفل الثاني: "<viv> هنا هو مكون الطفل 2 ، إليك المحتوى هو المحتوى بعد ajax: {{hello}} <//div>" ، البيانات () التبديل. 3 </viv> "}}}) ؛ </script>تأثير الكود:
【1】 عند التبديل إلى المكون 2 لأول مرة ، تحتاج إلى الانتظار لمدة ثانيتين قبل العرض (لأنه يتم بدء AJAX) ؛
[2] في حالة الحفاظ على الحفل ، عند التحول إلى المكون 2 الثاني أو الأحدث ، ليست هناك حاجة للانتظار ؛ ولكن يجب عرض محتوى Ajax بعد ثانيتين من بدء أول مرة Ajax ؛
【3】 بدون الحفاظ على الحفل (لا يتم حفظه في الذاكرة بعد التبديل) ، لا تزال بحاجة إلى الانتظار عند التبديل إلى المكون 2 في المرة الثانية.
[4] عند الانتظار ، لا يؤثر ذلك على التبديل مرة أخرى (أي عند انتظار المكون 2 ، انقر للتبديل مرة أخرى للتبديل مباشرة إلى المكون 3) ؛
يوضح:
【1】 سيتم تنفيذ التنشيط فقط عندما يتم تقديم المكون لأول مرة ، وسيتم تنفيذ الوظيفة مرة واحدة فقط (يظهر المكون تأخير عندما يظهر المكون)
【2】 عندما لا يكون هناك حميد ، في كل مرة يظهر فيها مكون التبديل ، سيتم إعادة إعادة عرضه (لأنه تم تنفيذ عملية التدمير عند إخفائها من قبل) ، وبالتالي سيتم تنفيذ طريقة التنشيط.
⑤ وضع الانتقال إلى وضع النقل
ببساطة ، دع المكون الديناميكي يتغير إلى الرسوم المتحركة. (تذكر الإرشادات الواردة في قسم الانتقال ، التحولات مناسبة للمكونات الديناميكية)
بشكل افتراضي ، يتم إكمال الدخول والخروج معًا ؛ (قد يظهر المحتوى الذي يدخل أسفل محتوى الخروج ، والذي يشير إلى الجانب السفلي من المحور ص. بعد الخروج ، سيظهر الإدخال في الموضع الصحيح) ؛
عندما يكون وضع الانتقال = "Out-In" ، فإن الرسوم المتحركة هي الخروج أولاً ثم الدخول ؛
عندما يكون وضع الانتقال = "In-Out" ، تكون الرسوم المتحركة أولاً داخل وبعد ذلك (مثل المشكلات المعرضة للحدوث في الافتراضي) ؛
رمز عينة: (باستخدام اسم الانتقال المخصص وملف ANIMAT.CSS)
<div id = "app"> <button @click = "toshow"> انقر للسماح لعرض مكون الطفل </button> <component v-bind: is = "thing_to_show" transition = "bounce" mode = "out-in">/component> </viv> <script> vue }) var vm = new vue ({el: '#app' ، data: {thing_to_show: "first" ، methods: {toShow: function () {// switch display var arr arr = ["first" ، "second" ، "this" ، ""] 1] ؛ {{hello}} </viv> "، البيانات: function () {return {hello:" "}}} ، ثالثًا: {// قالب مكون الطفل الثالث:" <viv> هنا مكون الطفل 3 </viv> "}}}}) ؛ </script>ما سبق هو المكون الديناميكي للفصل الثاني عشر لـ Vuejs الذي قدمه المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!