مثال تطوير الاتصالات الوالد والمكيلات الوالدين

Vue.js هي مكتبة لإنشاء واجهات الويب التي تعتمد على البيانات. الهدف من vue.js هو تنفيذ مكونات ربط البيانات المستجيبة والمجتمعة من خلال أبسط واجهة برمجة التطبيقات (API). (هذا تفسير رسمي!)

لم يستخدم المحرر أبدًا AngularJs ، ولم يتم استخدام React.js. لا أستطيع أن أشرح الاختلافات في الثلاثة بالتفصيل. إذا كنت تريد أن تعرف ، فهناك تحليل رسمي. الرجاء النقر هنا لعرضه.

تم إشراك المحرر في التنمية الأمامية لأكثر من عام. في البداية ، كان هناك الكثير من التقنيات في التطوير الأمامي. كان المحرر عاجزًا ولم يتمكن من أخذ في الاعتبار. بعد الفهم ، اختار أن يتعلم مسار التعلم للتعلم من عمليات الدمج الأساسية JS و jQuery. يستخدم المحرر vue.js بسبب احتياجات العمل. لماذا لا تختار AngularJS؟ في الواقع ، لا يمكنك التخلي عن jquery في نفس الوقت. يمكن أن تكون Vue.js و jQuery متوافقة تمامًا. بسبب هذا المشروع ، يعمل المحرر العمل الإضافي لفترة طويلة ويدرس باستمرار لتجنب زيادة وقت تطوير المشروع. بدون مزيد من اللغط ، دعنا نبدأ بعض ملخص تعلم Vue في المحرر. إذا لم تكتب جيدًا ، فلا تعتاد عليها. كانت كتابة المقالات دائمًا ضعفني. . . .

فيما يلي مثال Vue ، مثل السلسلة الأم

يمكن تمرير مكون الطفل هذا. مكون الأصل. يمكن الوصول إلى مثيل الجذر باستخدام this.root. الوالد لديه صفيف هذا. أطفال ، وجميع عناصره ؛ بالطبع ، في المشروع ، لا يمكن أن تحتوي مكوناتنا على واحد أو اثنين فقط. عندما يكون هناك الكثير من المكونات ، يكون من الصعب علينا أن نتذكر موقع المكون لدى الأطفال. يمكننا استخدام توجيه V-REF لإنشاء خطاف لمكوننا. هذا الخطاف هو الفهرس عندما تصل مكوناتنا الأخرى إلى المكون.

 // هذا أحد مكوناتي <msg v-ref: msgs> </sgg> // في هذا الوقت ، أنشأنا فهرسًا من msgs لمكون msg هذا//يمكننا الوصول إلى المكون var vm = new vue ({{}) ؛ var children = vm. $ refs.msgs // الوصول إلى مكونات طفلنا بهذه الطريقة // v-ref هي صفيف أو كائن ، وهي مجموعة من المكونات التي نقوم بإنشائها جميع خطافات المرجع.

هنا ، سأعرض لك صورة وألقي نظرة على المحتوى المتعلق بالوالدين والأطفال و $ refs (يبدو أن الصورة ضبابية بعض الشيء ولن تكون صورة ديناميكية كاملة. إنها محرجة ولا يمكنها رؤيتها بوضوح. يمكنك إنشاء عرض تجريبي وطباعته!)

على الرغم من أنه يمكننا الوصول مباشرة إلى المكونات في الحالة بأكملها بهذه الطريقة ، إلا أنه لا ينصح بذلك ، لأنه من السيء للغاية للأطفال تعديل حالة المكون الأصل مباشرة ، مما سيجعل المكونات الوالد والطفل مقترنة بإحكام. من الناحية المثالية ، يمكن لكل مكون تعديل حالته الخاصة فقط لأن نطاق كل مكون مستقل ؛

في هذه الحالة ، يجلب لنا Vue أحداثهم المخصصة

استخدم $ dispatch () لإرسال الأحداث ، وفقاعة الأحداث على طول السلسلة الأم ؛

استخدم $ broadcast () للبث ، ويتم نقل الأحداث إلى جميع أحفاد.

يبدو مجردة بعض الشيء ، من الأسهل الفهم بمثال

 // $ dispatch () bubble case <!-example-> <div id = "app"> <!-component communication 1-> <section> <div> <label for = "> msg data: </billy> {{msg}}} </fire> <!-subComponent-> <sg> </sgg> </viv> <nip> <sg> <sg> <! v-model = "msg"> <a href = "javaScript :؛" @click = "add_data"> إضافة </a> </div> </template> <script> vue.component ('msg' ، {// يتم استخدام سكر بناء الجملة لتسجيل المكون مباشرة ، و template simple و stistcut: '#msg' ، data: function () {msg: 'abc' هذا الحدث ، سيتم تشغيل طريقة $ dispatch ؛ هذا. $ parent.add (par_msg) هذا يستمع إلى المكون الفرعي المقابل 'add_msg': function (msg) {// add_msg طريقة تستخدم للاستماع إلى المكون الفرعي.

بعد قراءة هذا الرمز ، أعتقد أن الجميع يعرف استخدام $ dispatch (). في الواقع ، هناك معلمتان في ذلك. المعلمة الأولى هي أن المكون الأصل يستمع إلى اسم الطريقة في كائن الأحداث لمكون الطفل. يجب أن يكون الاثنان متسقين. المعلمة الثانية هي البيانات التي تم تحديثها بواسطة مكون الطفل ، والذي يتم تمريره أيضًا إلى البيانات المراد تحديثها بشكل متزامن إلى المكون الأصل. ثم يستخدم المكون الأصل هذه المعلمة لأداء العمليات المقابلة.

// استخدام طريقة broadcast () $ هو نفس استخدام $ dispatch (). الفرق هو أن كائن الحدث يتم إنشاؤه في مكون الطفل ، وأن الوظيفة التي يتم تشغيلها على المكون الأصل على العكس. ما نريد أن نقوله هنا هو أنه إذا كانت بيانات مكون الطفل تعتمد تمامًا على بيانات المكون الأصل ، فلا داعي لاستخدام طريقة تسليم الحدث العام. تحتاج فقط إلى الحصول على بيانات المكون الأصل من خلال الدعائم وربطها بمكون الطفل.

 <!-Component Communication 2 $ brougcast () method-> <section> <h3> مصدر البيانات الذي تمت إضافته بواسطة المكون الأصل: </h3> <div> <label for = "> id: </sable> <iv> <input type =" text "v-model =" id "> </viv> <iv> <viv> <" v-model = "name"> </viv> </viv> <viv> <label for = ""> المضيف: </label> <div> <input type = "text" v-model = "inst" لـ = ""> </billy> <viv> <a href = "javaScript :؛" @click = "add_table"> إضافة </a> </div> </viv> <h3> الجدول التالي هو معلومات مكون الطفل: </h3> <!-ربط بيانات مكون الأصل table_data إلى مكون الطفل-> <broadcase: data = "table_data" id = "broadcase"> <viv> <tabl> <thead> <tr> <th> id </h> <th> الاسم </th> <h> الهوايات </th> </tbody> <tbod list.inst}} </td> </tbody> </tbody> </fable> </viv> </fulsplate> <script> vue.component ('broadcase' ، {// هذا هو السكر بناء الجملة المستخدمة لتسجيل المكون ، والمعارف البسيطة والاختصار: '#broadcase' ، props: البيانات. '#app' ، data: {table_data: [{id: 1 ، name: 'gjei' ، inst: 'gjweir'} ، {id: 2 ، name: 'jiuyer' ، inst: 'oiUyt'}} ، methods: {add_table: this.inst} ؛ this.table_data.push (set) ؛ // this. $ broadcast ('test' ، set) ؛

يمكنك النقر هنا لاختبار المثالين المذكورين أعلاه. تم تحميل الملف إلى العرض التوضيحي للاتصالات الوالد والمكللة

عندما انتهيت من كتابة هذا ، نظرت إلى الوراء ورأيت أن المحتوى الذي كتبته بدا أنه فوضوي بعض الشيء ، وهو ما شعر بالخجل حقًا! فكرت في كتابة مدونة وبناء مكتبة ملاحظاتي الخاصة منذ وقت طويل ، لكن عندما حاولت كتابتها من قبل ، لم أستطع فعل ذلك. في الآونة الأخيرة ، قررت أن أصر على الكتابة بغض النظر عن كيفية كتابتها. ماذا لو كان أسلوبي في الكتابة يتحسن فجأة في يوم من الأيام!

في الواقع ، التطبيق ليس صعبًا للغاية. في الواقع يوفر مراقبة واجهة API المقابلة. كيفية تشغيل وتغيير تطبيق المشروع الفعلي لا يزال يتعين كتابته من قبل أنفسنا. المفتاح هو تحسين مستوى JS لدينا. بعد كل شيء ، هناك المزيد من تطبيقات الويب أكثر تعقيدًا! آمل أن يتمكن الطلاب الذين يحبون الواجهة الأمامية من تشجيع بعضهم البعض على الطريق إلى JS.