هذه المقالة عبارة عن برنامج تعليمي أكثر تفصيلاً وشمولاً جمعه المحرر في تركيبة مع المستندات الرسمية. إنه جيد جدًا وهو أكثر ملاءمة للمبتدئين للقراءة.
هذه المقالة تأتي من الوثيقة الرسمية:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
الوالدين والطفل الاتصالات
① الوصول إلى مكونات الطفل ، ومكونات الوالدين ، ومكونات الجذر ؛
هذا. مكون الوالد للوالدين
هذا. $ الأطفال يصل إلى مكونات الطفل (هي صفيف)
هذا. جذر سليل مثيل الجذر يصل إلى مثيل الجذر
نموذج الرمز:
<div id = "app"> المكون الأصل: <input v-model = "val"> <br/> مكون الطفل: <test: test = "val"> </test> </viv> <script> var vm = new vue ({el: '#app' ، data: {val: 1} ، contracts: {test: {props: v-model = 'test'/> "، الأساليب: {findParent: function () {console.log (this. $ parent) ؛ // access the component console.log (هذا. $ parent.val) ؛ // تحقق مما إذا كان المكون الأصل ومكون الجذر متطابقين (لأن مكونه الأصل هو مكون الجذر)}}}}}}) ؛ </script>عندما تظهر المفاتيح في مربع الإدخال من المكون الفرعي ، تكون المحتويات المعروضة هي:
قيمة مربع الإدخال للمكون الأصل والمكون الأصل (الافتراضي هو 1) ، 0 (يمثل أنه العنصر الأول في سمة الطفل للمكون الأصل) ، والصحيح (لأن المكون الأصل هو المكون الجذر ، هو متطابق) ؛
وبهذه الطريقة ، يمكن إجراء التفاعل في شجرة المكون.
أحداث العاصفة:
بادئ ذي بدء ، يجب وضع الأحداث في خاصية الأحداث بدلاً من خاصية الأساليب (وهو خطأ من المحتمل أن يرتكبهم المبتدئون). يمكنهم فقط تشغيل الأحداث في خاصية الأحداث ، في حين لا يمكن تشغيل الأحداث في الأساليب.
ثانياً ، هناك فرق بين التوزيع التصاعدي والبث الهابط: سيؤدي التوزيع الصعودي إلى حدوث حدث يحمل نفس الاسم ، في حين أن البث الهابط لن ؛
ثالثًا ، لن يؤدي التوزيع التصاعدي والبث الهبوطي إلا إلى تشغيل الأحداث للخطوط المباشرة (الأطفال أو الوالدين ، باستثناء الأجداد والأحفاد) بشكل افتراضي ، وسيستمر في هذا الخط ما لم تكن قيمة إرجاع الحدث صحيحة.
رابعا ، لا يمكن استدعاء الحدث بشكل صريح من خلال هذا. اسم الحدث.
نموذج الرمز:
<div id = "app"> المكون الأصل: <button @click = "parentclick"> انقر لنشر البث لأسفل </button> <br/> مكون الطفل 1: <Nidsh1> </fridge1> <br/> مكون طفل آخر 1: <sholedren1> </children1> </div> <sript> vm = new vue ( ParentClick () {this. $ broadcast ("parentClick" ، "ABC") ؛ لا تستمر في توزيع الدعائم: [test '] ، القالب: Console.log ("ParentClick-children1") ؛ {childrenclick: function () {console.log ( ستستمر في توزيع الدعائم على المكونات الفرعية للطفل: [test '] ، القالب: (msg) {console.log ("ParentClick-AnotherChildren1") ؛ هذا. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}يوضح:
【1】 انقر فوق زر المكون الأصل ، وسيتم بثه لأسفل ، ثم يؤدي إلى تشغيل المكون الطفل 1 نفسه ، ومكون طفل آخر 1 ، ومكون طفل آخر 2 ؛
【2】 النقر فوق زر مكون الطفل 2 سيؤدي إلى حدوث حدث مكون الطفل 2 وحدث مكون الطفل 1 ، ولكن لن يؤدي إلى زر مكون الأصل ؛
【3】 النقر على زر مكون طفل آخر 2 سيؤدي إلى حدوث حدث مكون طفل آخر 2 ، وحدث مكون طفل آخر 1 وحدث المكون الأصل (لأن قيمة إرجاع حدث مكون طفل آخر صحيح) ؛
③ استخدم V-ON لربط الأحداث المخصصة:
[1] ببساطة ، عندما يؤدي مكون الطفل إلى ظهور حدث (الطريقة في الأحداث) ، سيقوم المكون الأصل أيضًا بتنفيذ طريقة (الطريقة في أساليب المكون الأصل).
[2] تتم كتابة الربط المشغل في القالب (أي قالب القالب الذي يتم استبداله). يمكن أن تربط مكونات الأطفال المتعددة طريقة مكون الأصل ، أو يمكن أن تربط مكونات الطفل المختلفة طريقة مكون الأصل المختلفة ، ولكن لا يمكن لحدث مكون الطفل نفسه ربط طريقة.
【3】 يرسل مكون الطفل معلمات تمرير الرسائل. حتى إذا لم يكن لحدث مكون الطفل أي معلمات ، فإنه لا يؤثر على طريقة تمرير المعلمات إلى المكون الأصل (أي ، يمكن أن تقبل طريقة المكون الأصل المعلمات التي تم الحصول عليها بواسطة طريقة مكون الطفل)
كمثال:
<div id = "app"> المكون الأصل: <button> انقر لنشر البث </button> <br/> مكون الطفل 1: <!-يتم كتابة الربط هنا. يمكن أن تكون الارتباطات المتعددة مرتبطة بنفسها ، أو تختلف الروابط المختلفة ، ولكن لا يمكن أن تكون متعددة المرتبطة بواحد-> <الأطفال v-on: test = "parent" @test2 = "other"> </childs> </viv> <script> var vm = new vue ({el: '#app' ، data: {val: 1} ، methods: {arger) {arg) الحدث ") ؛} ، آخر: function () {console.log (" طريقة أخرى ") ؛}} ، المكونات: {الأطفال: {// هذا ليس له قيمة إرجاع ولن يستمر في توزيع الدعائم: ['test'] ، template: childclick: {this. $ emit ("Test" }) ؛ </script>④ فهرس المكون الفرعي
ببساطة: يمكنك الحصول مباشرة على المكونات الفرعية من الفهرس ، ثم يمكنك استدعاء طرق كل مكون فرعي.
طريقة إضافة الفهرس هي: إضافة V-REF إلى العلامة: اسم الفهرس
طريقة استدعاء المكون هي: vm. $ ref. اسم الفهرس
يمكنك أيضا استخدام هذا. $ Ref. فهرس الاسم مباشرة في المكون الأصل
في هذا الوقت ، يمكنك الحصول على المكون ، ثم يمكن للمكون استدعاء طرقه أو استخدام بياناته.
نموذج الرمز:
<div id = "app"> المكون الأصل: <button @click = "todo"> الأحداث التي تثير مكون الطفل </button> <br/> subcomponent 1: <!-يتم كتابة الربط هنا. يمكن أن تكون الارتباطات المتعددة مرتبطة بنفسها ، أو روابط مختلفة مختلفة ، ولكن لا يمكن أن تكون متعددة المرتبطة بواحدة-> <الأطفال v-ref: child> </childs> </div> <script> var vm = new vue ({el: '#app' ، methods: {todo: function () {this. $ refs.child.fromparent () ؛ الأطفال: {// هذا ليس له قيمة إرجاع ولن يستمر في توزيع الدعائم: [test '] ، القالب: </script>ما ورد أعلاه هو اتصال مكون Vuejs 10th Vuejs الوالد والطفل المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!