يجب أن يتعلم Vue.js كل يوم التواصل بين المكونات

ما هي المكونات؟

المكون هو واحد من أقوى ميزات Vue.js. يمكن للمكونات تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام. على مستوى أعلى ، تعد المكونات عناصر مخصصة ، ويضيف برنامج التحويل البرمجي Vue.js ميزات خاصة إليه. في بعض الحالات ، يمكن أن تكون المكونات أيضًا في شكل عناصر HTML الأصلية ، وتم تمديدها مع ميزة IS.

مكونات الاستخدام

يسجل

كما ذكرنا من قبل ، يمكننا إنشاء مُنشئ مكون باستخدام Vue.Extend ():

 var myComponent = vue.extend ({// reports ...})

لاستخدام هذا المُنشئ كمكون ، تحتاج إلى التسجيل في `vue.component (علامة ، مُنشئ)` **:

 // تسجيل المكون على مستوى العالم ، فإن العلامة هي my-componentvue.component ('my-component' ، myComponent)

<p> vue.js لا يفرض قاعدة W3C (الأحرف الصغيرة ، ويتضمن شريطًا قصيرًا) لأسماء العلامات المخصصة ، على الرغم من أنه من الأفضل اتباع هذه القاعدة.

بعد تسجيل المكون ، يمكن استخدامه كعنصر مخصص <-apponent> في وحدة مثيل الأصل. للتأكد من تسجيل المكون قبل تهيئة مثيل الجذر:

 <div id = "example"> <my-component> </mo-component> </viv> // تعريف var myComponent = vue.extend ({template: '<viv> مكون مخصص! </viv>'}) // registr

تم تقديمها على النحو التالي:

 <div id = "example"> <viv> مكون مخصص! </div> </viv>

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

التسجيل المحلي

ليست هناك حاجة لتسجيل كل مكون على مستوى العالم. لا يمكن استخدامه إلا في مكونات أخرى ، قم بالتسجيل مع مكونات خيار المثيل:

 var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({template: '...' ، المكونات: {// <-component> لا يمكن استخدامها إلا في قالب مكون الأصل 'my-component': child}})

هذا التغليف مناسب أيضًا للموارد الأخرى مثل التعليمات والمرشحات والانتقالات.

تسجيل السكر النحوي

لجعل الحدث أكثر بساطة ، يمكنك تمرير كائن الخيار مباشرة بدلاً من المُنشئ إلى خيارات Vue.component () وخيارات المكون. يتصل Vue.js تلقائيًا Vue.Extend () خلف الظهر:

 .

مشكلات خيارات المكون

يمكن أيضًا استخدام معظم الخيارات التي تم تمريرها في مُنشئ VUE في Vue.Extend () ، ولكن هناك حالتان خاصتان: البيانات و EL. تخيل لو قمنا ببساطة بتمرير كائن كخيار بيانات إلى vue.extend ():

 var data = {a: 1} var myComponent = vue.Extend ({data: data})

المشكلة في ذلك هي أن جميع حالات MyComponent ستشارك نفس كائن "البيانات"! هذا ليس ما نريده في الأساس ، لذلك يجب أن نستخدم وظيفة كخيار "البيانات" لإرجاع كائن جديد:

 var myComponent = vue.Extend ({data: function () {return {a: 1}}})

وبالمثل ، يجب أن يكون خيار `el` أيضًا وظيفة عند استخدامها في` vue.extend () `.

تحليل القالب

قالب Vue هو قالب DOM ، والذي يستخدم محللًا أصليًا للمتصفح بدلاً من تنفيذ واحد بنفسه. بالمقارنة مع قوالب السلسلة ، فإن قوالب DOM لها بعض الفوائد ، ولكن هناك مشاكل ، ويجب أن تكون مقتطف HTML صالحة. بعض عناصر HTML لها قيود على العناصر التي يمكن وضعها داخلها. القيود الشائعة:

• لا يمكن أن تحتوي على عناصر تفاعلية أخرى (مثل الأزرار والروابط)

• UL و OL يمكن أن تشمل LI فقط مباشرة

• يمكن SELECT فقط تضمين الخيار و OPTGROUP

• لا يمكن أن يشمل الجدول مباشرة الرأس ، tbody ، tfoot ، tr ، التسمية التوضيحية ، col ، colgroup

• يمكن أن يتضمن TR فقط TH و TD مباشرة

في الممارسة العملية ، يمكن أن تؤدي هذه القيود إلى نتائج غير متوقعة. على الرغم من أنه قد يعمل في حالات بسيطة ، إلا أنه لا يمكنك الاعتماد على مكونات مخصصة لتوسيع النتائج قبل التحقق من صحة المتصفح. على سبيل المثال ، <my-select> <point> ... </option> </my-select> ليس قالبًا صالحًا ، حتى لو انتهى مكون my-select بالتوسيع إلى <select> ... </select>.

والنتيجة الأخرى هي أنه لا يمكن استخدام العلامات المخصصة (بما في ذلك العناصر المخصصة والعلامات الخاصة ، مثل <Ponent> ، <implate> ، <bartial>) في العلامات التي لها قيود على العناصر الداخلية ، مثل UL ، SELECT ، TABLE ، إلخ.

بالنسبة للعناصر المخصصة ، يجب استخدام السمة IS:

 <border> <tr is = "my-apponent"> </tr> </table>

لا يمكن استخدام "" ، "، في هذا الوقت ،" "

يمكن أن يكون هناك متعددة ``:

 <bordy> <tbody v-for = "item in heads"> <tr> حتى الصف </tr> <tr> الصف الفردي </tr> </tbody> </table>

الدعائم

تمرير البيانات باستخدام الدعائم

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

"الدعامة" عبارة عن حقل لبيانات المكون من المتوقع أن يتم تمريره من المكون الأصل. تحتاج مكونات الطفل إلى إعلان الدعائم بشكل صريح مع خيار الدعائم:

 vue.component ('Child' ، {// DENRY PROPS Props: ['msg'] ، // prop يمكن استخدامه في القوالب // يمكنك استخدام `this.msg` لتعيين القالب: '<span> {{msg}} </span>'})

ثم مررها بسلسلة عادية:

<Child MSG = "Hello!"> </child>

الحدب مقابل شريط أفقي

سمات HTML غير حساسة للحالة. عندما يتم استخدام الدعامة ذات النموذج الاسم ، يتم استخدام Camelcase كميزة ، يجب تحويلها إلى حالة Kebab (خطوط أفقية قصيرة مفصولة):

 vue.component ('Child' ، {// camelcase in javaScript Props: ['mymessage'] ، template: '<span> {{mymessage}} </span>'}) <!-kebab-case in html-> <Child Message = "Hello!"

الدعائم الديناميكية

على غرار استخدام V-bind لربط سمات HTML للتعبير ، يمكنك أيضًا استخدام V-Bind لربط الدعائم الديناميكية لبيانات المكون الأصل. عندما تتغير بيانات المكون الأصل ، يتم نقلها أيضًا إلى مكون الطفل:

 <viv> <input v-model = "parentmsg"> <br> <child v-bind: meSsage = "parentMsg"> </fild> </viv>

عادة ما يكون استخدام بناء جملة الاختصار لـ "V-bind" أبسط:

<الطفل: message = "parentmsg"> </fild>

بناء الجملة الحرفي مقابل بناء الجملة الديناميكي

من الخطأ الشائع للمبتدئين تمرير القيم الرقمية باستخدام بناء الجملة الحرفي:

<!-مرت سلسلة "1"->

<comp some-prop = "1"> </pom>

نظرًا لأنه دعامة حرفية ، يتم تمرير قيمته في السلسلة "1" "بدلاً من الرقم الفعلي. إذا كنت ترغب في تمرير رقم JavaScript الفعلي ، فأنت بحاجة إلى استخدام بناء الجملة الديناميكي بحيث يتم حساب قيمته كتعبير JavaScript:

<!-تمرير الرقم الفعلي->

<comp: some-prop = "1"> </comp>

نوع الربط الدعامة

Prop هو ربط أحادي الاتجاه افتراضيًا: عندما تتغير خصائص المكون الأصل ، سيتم تمريرها إلى مكون الطفل ، ولكن العكس لن يحدث ذلك. هذا لمنع مكون الطفل من تعديل حالة المكون الأصل عن طريق الخطأ - وهذا سيجعل تدفق بيانات التطبيق يصعب فهمه. ومع ذلك ، من الممكن أيضًا إجبار الارتباط ثنائي الاتجاه أو مرتبة واحدة بشكل صريح باستخدام معدل ربط .sync أو .once:

بناء الجملة المقارن:

 <!-الافتراضي هو ربط اتجاه واحد-> <الطفل: msg = "parentmsg"> </child> <!-الربط ثنائي الاتجاه-> <الطفل: msg.sync = "parentmsg"> </child> <!-ربط واحد-> <الطفل: msg.once = "parentmsg"> </child>

يزامن الربط ثنائي الاتجاه سمة MSG لمكون الطفل مرة أخرى إلى سمة ParentMsG للمكون الأصل. الربط المفرد لن يزامن التغييرات بعد الإنشاء.

لاحظ أنه إذا كان الدعامة كائنًا أو صفيفًا ، فسيتم تمريره بالرجوع إليه. سيؤثر تعديله داخل مكون الطفل على حالة المكون الأصل ، بغض النظر عن نوع الربط المستخدم.

التحقق من الدعامة

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

 vue.component ('example' ، {props: {// basic type detection (`null` يعني أي نوع على ما يرام) propa: number ، يتم إرجاعها بواسطة دالة إلى propd: {type: object ، default: function () {return {msg: 'hello'}} ، (جديد في 1.0.12) // قم بتحويل القيمة قبل تعيين قيمة Propg: {coerce: function (val) {return val + '' // تحويل القيمة إلى سلسلة}} ، النبي: {coerce: function (val) {return json.parse (val) // تحويل سلسلة json إلى كائن}}}}}}}

يمكن أن يكون النوع هو المنشئ الأصلي التالي:

•خيط

•رقم

• منطقية

•وظيفة

•هدف

• صفيف

يمكن أن يكون Type أيضًا مُنشئًا مخصصًا يستخدم اكتشاف مثيل.

عند فشل التحقق من الدعامة ، يرفض VUE تعيين هذه القيمة على مكون الطفل ، وسيتم إلقاء تحذير إذا تم استخدام نسخة التطوير.

الوالدين والطفل الاتصالات

رابط الوالدين

يمكن لمكون الطفل الوصول إلى مكونه الأم مع هذا. $ Parent. يمكن لأحفاد مثيل الجذر الوصول إليه بهذا. $ Root. يحتوي المكون الوالد على صفيف هذا. أطفال $ يحتوي على جميع عناصره الفرعية.

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

1. هذا يسمح للمكون الأصل بالاقتران عن كثب مع مكون الطفل ؛

2. إذا نظرت فقط إلى المكون الأصل ، فمن الصعب فهم حالة المكون الأصل. لأنه قد يتم تعديله من قبل أي مكون طفل! من الناحية المثالية ، يمكن للمكون فقط تعديل حالته نفسها.

الأحداث المخصصة

يقوم مثيل VUE بتنفيذ واجهة حدث مخصصة للاتصال في شجرة المكون. نظام الأحداث هذا مستقل عن أحداث DOM الأصلية ويستخدمه بشكل مختلف.

كل مثيل VUE هو مشغل حدث:

• استخدم $ ON () للاستماع للأحداث ؛

• استخدم $ emit () لتشغيل حدث عليه ؛

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

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

على عكس حدث DOM ، يتوقف حدث VUE تلقائيًا من الفقاعة بعد إعادة الاتصال الأول أثناء عملية الفقاعة ، ما لم يتم إعادة الاتصال بشكل صريح.

مثال بسيط:

 <!-قالب مكون الطفل-> <template id = "child-template"> <input v-model = "msg"> <button v-on: click = "dify"> إرسال الحدث </button> </template> <!-قالب مكون الأصل-> <div id = "evects-example"> <p> الرسائل: {{{{ json}} </p> <fild> </fild> </viv> // تسجيل مكون الطفل // أرسل الرسالة الحالية vue.component ('child' ، {template: '#child-template' ، data: function () {return {msg: 'hello'}} ، methods: this.msg) this.msg = ''}}}}) // تهيئة المكون الأصل // ادفع الحدث إلى صفيف عند استلام الرسالة var parent = new vue ({el: '#events-example' ، data: {messages: [] في الحدث ، يرتبط رد الاتصال تلقائيًا بالمثال حيث يتم تسجيله هذا. messages.push (msg)}}})

استخدم V-ON لربط الأحداث المخصصة

المثال أعلاه جيد جدًا ، لكن لا يمكننا أن نرى بشكل حدسي أين يأتي حدث "child-MSG" من رمز المكون الأصل. سيكون من الأفضل إذا أعلننا عن معالج الأحداث حيث يتم استخدام المكونات الفرعية في القوالب. بالنسبة إلى هذه المكونات الفرعية ، يمكنك استخدام V-ON للاستماع إلى الأحداث المخصصة:

<Child V-On: child-msg = "handleit"> </fild>

هذا يوضح: عندما يؤدي مكون الطفل إلى تشغيل حدث "child-msg" ، سيتم استدعاء طريقة "Handleit" للمكون الأصل. يتم وضع جميع التعليمات البرمجية التي تؤثر على حالة المكون الأصل في طريقة "Handleit" للمكون الأصل ؛ يركز مكون الطفل فقط على حدث التشغيل.

فهرس المكون الفرعي

على الرغم من الدعائم والأحداث ، لا يزال من الضروري في بعض الأحيان الوصول إلى مكونات الطفل مباشرة في JavaScript. لهذا الغرض ، يمكنك استخدام V-REF لتحديد معرف فهرس لمكون الطفل. على سبيل المثال:

 <div id = "parent"> <user-profile v-ref: profile> </suster-profile> </fire> var parent = new vue ({el: '#parent'})

عند استخدام V-REF و V-for معًا ، يكون المرجع عبارة عن صفيف أو كائن يحتوي على مكونات الطفل المقابلة.

استخدم فتحة لتوزيع المحتوى

عند استخدام المكونات ، غالبًا ما يتعين عليك الجمع بينها مثل هذا:

 <APP> <App-Header> </App-Header> <App-Footer> </app-footer> </app>

لاحظ نقطتين:

1. لا يعرف المكون <App> المحتوى الذي سيكون في نقطة التثبيت. يتم تحديد محتوى نقطة التثبيت بواسطة المكون الأصل لـ <app>.

2. من المرجح أن يكون للمكون <App> قالب خاص به.

من أجل دمج المكونات ، نحتاج إلى طريقة لخلط محتويات المكون الأصل مع القالب الخاص بمكون الطفل. تسمى هذه المعالجة توزيع المحتوى (أو "الترجمة" إذا كنت على دراية بـ Angular). تقوم Vue.js بتنفيذ واجهة برمجة تطبيقات توزيع المحتوى التي تشير إلى مشروع مواصفات مكون الويب الحالي ويستخدم عنصرًا خاصًا خاصًا بمحتوى للمحتوى الأصلي.

نطاق التجميع

قبل الغوص في واجهة برمجة تطبيقات توزيع المحتوى ، نوضح أولاً نطاق تجميع المحتوى. افترض أن القالب هو:

<مكون الطفل>

{{msg}}

</child-hearponent>

هل يجب أن تكون MSG مرتبطة ببيانات المكون الأصل ، أو البيانات المرتبطة بمكون الطفل؟ الجواب هو المكون الأصل. نطاق المكون هو ببساطة:

يتم تجميع محتوى قالب المكون الأصل ضمن نطاق المكون الأصل ؛ يتم تجميع محتوى قالب مكون الطفل في نطاق المكون الطفل

هناك خطأ شائع هو محاولة ربط توجيه لخصائص/طريقة مكون الطفل داخل قالب المكون الأصل:

<!-غير صالح->

<child-hedonction v-show = "somechildproperty"> </phild-component>

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

إذا كنت ترغب في ربط التعليمات في مكون فرعي لعقدة الجذر للمكون ، فيجب عليك القيام بذلك في قالبه:

 vue.component ('child-component' ، {// works لأنه في قالب النطاق الصحيح: '<div v-show = "somechildproperty"> الطفل </div>' ، البيانات: function () {return {somechildProperty: true}}})

وبالمثل ، يتم تجميع محتوى التوزيع في نطاق المكون الأصل.

فتحة واحدة

سيتم التخلص من محتويات المكون الأصل ما لم يكن قالب مكون الطفل <Slot>. إذا كان لدى قالب مكون الطفل فتحة واحدة فقط بدون خصائص ، فسيتم إدراج المحتوى الكامل للمكون الأصل حيث توجد الفتحة واستبدالها.

يعتبر محتوى علامة <Slot> محتوى تراجعًا. يتم تجميع محتوى العودة في نطاق المكون الطفل ، ويتم عرض محتوى الاحتياطي عندما يكون العنصر المضيف فارغًا ولا يوجد محتوى للإدراج.

افترض أن مكون My-bound لديه القالب التالي:

 <viv> <h1> هذا هو مكوني! </h1> <slot> إذا لم يكن هناك محتوى موزعة ، فسوف يظهر لي. </slot> </viv>

قالب مكون الوالدين:

<-apponent>

<p> هذا هو بعض المحتوى الأصلي </p>

<p> هذا هو بعض المحتوى الأصلي </p>

</my-apponent>

نتيجة تقديم:

 <viv> <h1> هذا هو مكوني! </h1> <p> هذا هو بعض المحتوى الأصلي </p> هذا هو محتوى أصلي أكثر </p> </viv>

سميت الفتحة

يمكن تكوين عنصر <Slot> باسم ميزة خاصة لتكوين كيفية توزيع المحتوى. يمكن أن تحتوي فتحات متعددة على أسماء مختلفة. ستطابق الفتحة المسماة عناصر في جزء المحتوى الذي يحتوي على سمة الفتحة المقابلة.

لا يزال من الممكن أن تكون هناك فتحة مجهولة ، وهي الفتحة الافتراضية ، كفتحة احتياطية لمطابقة شظايا المحتوى التي لا يمكن العثور عليها. بدون فتحة افتراضية ، سيتم التخلص من شظايا المحتوى التي لا مثيل لها.

على سبيل المثال ، لنفترض أن لدينا مكونًا متعدد التكرار مع قالب مثل:

 <viv> <slot name = "One"> </slot> <slot> </slot> <slot name = "two"> </slot> </viv>

قالب مكون الوالدين:

 <p-insertion> <p slot = "one"> واحد </p> <p slot = "two"> اثنان </p> الافتراضي A </p> </sulti-insertion>

نتيجة التقديم هي:

 <viv> <p slot = "one"> واحد </p> <p> الافتراضي A </p> <p slot = "two"> اثنان </p> </viv>

API توزيع المحتوى هي آلية مفيدة للغاية عند الجمع بين المكونات.

المكونات الديناميكية

يمكن للمكونات المتعددة استخدام نفس نقطة التثبيت ثم التبديل ديناميكيًا بينهما. استخدم عنصر <Ponent> المحجوز للربط ديناميكيًا بخاصية IS:

 جديد Vue ({el: 'body' ، البيانات: {currentView: 'home'} ، المكونات: {home: {/ * ... */} ، المشاركات: {/ * ... */} ، الأرشيف: {/ * ... */}}})

الحفاظ على الحفل

إذا تم الاحتفاظ بالمكون الذي تم تبديله في الذاكرة ، فيمكن الاحتفاظ به أو إعادة تقديمه. للقيام بذلك ، يمكنك إضافة معلمة توجيهية حافظة:

<المكون: IS = "CurrentView" Keep-Alive>

<!-سيتم تخزين المكونات غير النشطة->

</component>

تنشيط الخطاف

عند تبديل المكونات ، قد يتطلب قطع المكونات بعض العمليات غير المتزامنة قبل قطعها. للتحكم في مدة تبديل المكون ، أضف خطاف تنشيط إلى مكون القطع:

 vue.component ('acctate-example' ، {activate: function (done) {var self = this loadDataAsync (function (data) {self.somedata = data done ()}}})

لاحظ أن خطاف التنشيط يعمل فقط أثناء تبديل المكون الديناميكي أو عرض تهيئة المكون الثابت ، ولا يعمل في الإدراج اليدوي باستخدام طرق المثيل.

وضع الانتقال

يتم استخدام ميزة وضع الانتقال لتحديد كيفية انتقال مكونين ديناميكيين.

بشكل افتراضي ، أدخل واترك الانتقال بسلاسة. يمكن أن تحدد هذه الميزة وضعين آخرين:

• في الخارج: ينتقل المكون الجديد أولاً إلى ، وبعد الانتقال ، سينتقل المكون الحالي.

• Out-In: ينتقل المكون الحالي أولاً ، وبعد الانتقال ، ينتقل المكون الجديد إلى العملية.

مثال:

 <!-تتلاشى أولاً ثم تتلاشى في-> <component: is = "view" transition = "fade" transition-mode = "out-in"> </component

متنوع

مكونات و v-for

يمكن للمكونات المخصصة استخدام v-for مباشرة مثل العناصر العادية:

<my-apponent v-for = "item in exment"> </my-apponent>

ومع ذلك ، لا يمكن تمرير البيانات إلى مكون لأن نطاق المكون يتيمة. لتمرير البيانات إلى المكونات ، يجب استخدام الدعائم:

<مكوني

v-for = "العنصر في العناصر"

: item = "item"

: index = "$ index">

</my-apponent>

السبب في عدم حقن العنصر تلقائيًا في المكون هو أن هذا يتسبب في اقتران المكون بإحكام مع V-For الحالي. أعلن صراحة من أين تأتي البيانات ويمكن إعادة استخدامها في مكان آخر للمكونات.

كتابة المكونات القابلة لإعادة الاستخدام

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

تأتي واجهة برمجة تطبيقات مكون Vue.js من ثلاثة أجزاء: الدعامة والأحداث والفتحة:

• Prop يسمح للبيئة الخارجية بتمرير البيانات إلى المكونات ؛

• الأحداث تسمح للمكونات بإجراء إجراءات في البيئة الخارجية ؛

• تتيح الفتحة للبيئة الخارجية إدراج المحتوى في بنية عرض المكون.

باستخدام بناء جملة الاختصار لـ V-bind و V-On ، يكون المسافة البادئة للقالب واضحة وموجزة:

<مكوني

: foo = "baz"

: BAR = "QUX"

@event-a = "dothis"

@event-b = "dothat">

<!-المحتوى->

<img slot = "icon" src = "...">

<p slot = "main-text"> hello! </p>

</my-apponent>

مكونات غير متزامنة

في التطبيقات الكبيرة ، قد نحتاج إلى تقسيم التطبيق إلى قطع صغيرة وتنزيله من الخادم فقط إذا لزم الأمر. لتسهيل الأمور ، يسمح Vue.js بتعريف المكون كدالة للمصنع ، مما يفسر تعريف المكون ديناميكيًا. يؤدي Vue.js فقط إلى تشغيل وظيفة المصنع عندما يحتاج المكون إلى تقديمه ، ويختتم النتيجة لإعادة الإشارة لاحقًا. على سبيل المثال:

 vue.component ('async-example' ، function (حل ، رفض) {setTimeOut (function () {solve ({template: '<viv> أنا async! </viv>'})} ، 1000)})

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

 vue.component ('async-webpack-example' ، function (حل) {// هذا المطلب الخاص يطلب بناء جملة webpack // تقسيم الكود المترجم تلقائيًا إلى كتل مختلفة ، // سيتم تنزيل هذه الكتل تلقائيًا من خلال طلب ajax.

اتفاقية تسمية الموارد

تظهر بعض الموارد ، مثل المكونات والتوجيهات ، في قوالب كسمات HTML أو عناصر HTML المخصصة. نظرًا لأن أسماء سمات HTML وأسماء العلامات ليست حساسة للحالة ، فإن اسم المورد يحتاج عادةً إلى استخدام شكل kebab-case بدلاً من camelcase ، وهو غير مناسب للغاية.

يدعم Vue.js اسم الموارد في شكل Camelcase أو PascalCase ويحولها تلقائيًا إلى حالة Kebab في القالب (على غرار اتفاقية التسمية للدعامة):

 // في مكونات تعريف المكون: {// سجل myComponent مع نموذج camelcase: {/ *... */}}} <!-باستخدام نموذج kebab-case في القوالب-> <-my-component> </mo-component> es6 consugy from from: './components/dropdown-menu' ؛ export الافتراضي {مكونات: {// اكتب <text-box> و <stropdown-menu> textbox ، RetpownMenu}}

المكونات العودية

يمكن للمكونات أن تسمي نفسها بشكل متكرر ضمن قوالبها ، ولكن فقط إذا كان لها خيار الاسم:

 var stackoverflow = vue.extend ({name: 'stack-overflow' ، template: '<viv>' ' + // استدعاءها بشكل متكرر من تلقاء نفسها "<stack-overflow> </stack-overflow>' + '</viv>'})

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

مثيل الشظية

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

لا تكتب القالب مثل هذا:

<div> عقدة الجذر 1 </div>

<div> عقدة الجذر 2 </div>

يوصى بكتابة هذا:

<viv>

لدي عقدة جذر واحدة!

<viv> العقدة 1 </viv>

<viv> العقدة 2 </viv>

</div>

ستقوم المواقف التالية بتحويل المثيل إلى مثيل مجزأ:

1. يحتوي القالب على عناصر متعددة المستوى.

2. القالب يحتوي فقط على نص عادي.

3. القالب يحتوي فقط على مكونات أخرى (قد تكون مكونات أخرى مثيل جزء).

4. يحتوي القالب على توجيه عنصر واحد فقط ، مثل <Partial> أو <router-view> من Vue-Router.

5. عقدة جذر القالب لديها تعليمات التحكم في العملية ، مثل V-IF أو V-For.

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

ولكن الأهم من ذلك ، سيتم تجاهل تعليمات التحكم غير العملية ، والميزات غير المحببة والتحولات على عناصر المكونات لأنه لا يوجد عنصر جذر للربط:

<!-لا ، لأنه لا يوجد عنصر جذر->

<example v-show = "ok" transition = "fade"> </example>

<!-الدعائم نعم->

<مثال: prop = "somedata"> </efteal>

<!-التحكم في العملية على ما يرام ، ولكن لا يوجد انتقال->

<example v-if = "ok"> </example>

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

قوالب مضمنة

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

<my-apponent inline-template>

<p> يتم تجميعها كقالب خاص بالمكون </p>

<p> ليس محتوى ترجمة الوالدين. </p>

</my-apponent>

ومع ذلك ، فإن المسبح المضمّن يجعل نطاق القالب يصعب فهمه ولا يمكنه تخزين نتائج تجميع القالب. أفضل الممارسات هي استخدام خيار القالب لتحديد القوالب داخل المكون.

تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.

للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.