Vuejs الجزء 8 تحليل مثيل تعريف مكون Vuejs

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

هذه المقالة تأتي من الوثيقة الرسمية:

http://cn.vuejs.org/guide/components.html

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

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

تعريف المكون

① وظيفة المكونات:

【1】 تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام ؛

【2】 مكونات هي عناصر مخصصة ، ويمكن لبرنامج التحويل البرمجي Vuejs إضافة وظائف خاصة لهم ؛

【3】 في بعض الحالات ، يمكن أن تكون المكونات في شكل عناصر HTML الأصلية ، وتمتد بطريقة تشبه IS.

② اكتب مكونًا قياسيًا:

ينقسم إلى الخطوات التالية:

[1] يجب أن يكون المكان الذي يتم تركيب المكون هو عنصر HTML الذي يتم تقديمه بواسطة مثيل VUE. على سبيل المثال ، على سبيل المثال ، عنصر HTML مثل <div id = "app"> </div> أعلاه وعقده الفرعية ؛

【2】 حدد مكونًا ، استخدمه

 var variable name = Vue.Extend ({template: "هنا هو محتوى القالب من html"}) يتم إنشاؤه في شكل "var btn = vue.extend ({template:

【3】 قم بتسجيل المكون المحدد على مثيل VUE ، والذي سيسمح باستبدال العلامة المحددة بمحتوى المكون.

كرمز:

 // سجله إلى vue.component ("add-button" ، btn) ؛

على وجه التحديد ، كل علامة من العلامات التالية (ضمن نطاق مثيل الجذر لـ VUE)

 <add-button> </add-buttro>

سيكون

 <NUNTY> هذا زر </button>

استبدال.

[4] الطريقة المذكورة أعلاه هي التسجيل العالمي (سيتم استبدال علامة الإضافات لكل مثيل VUE بما نحدده) ؛

الحل هو التسجيل المحلي.

على سبيل المثال ، الرمز: (هذا هو تعيين سمة القالب. يمكنك أيضًا وضع علامة <add-button> </add-button> في علامة <div id = "app"> </viv> عندما لا تكون هذه السمة متوفرة.

 <div id = "app"> </div> <script> // تحديد مكون var btn = vue.extend ({template: "<button> هذا زر </button>"}) vue.component ("add-button" ، btn) ؛ // قم بإنشاء مثيل جذر ، أي ، دع Vue ساري المفعول على هذا الجذر var vm = new vue ({el: '#app' ، template: "<add-button> </add-button>"}) ؛ </script>

③ مكونات التسجيل المحلية:

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

ثم عند الإعلان عن مثيل VUE ، سيتم إضافته إلى خاصية المكونات (هو كائن ، يتم وضعه في شكل KV) (لاحظ أن هذه الكلمة لها S) أخرى

كرمز:

 <div id = "app"> </viv> <script> // تحديد مكون var btn = vue.extend ({template: "<button> هذا هو زر </button>"}) "add-button": btn}}) ؛ </script>

ملحوظة:

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

④Simplify الخطوات:

【1】 يتم إكمال مكونات تحديد المكونات ومكونات التسجيل في خطوة واحدة:

 // تحديد مكون vue.component ("add-button" ، {template: "<NUNTY> هذا هو زر </button>"}) ؛

【2】 أثناء التسجيل المحلي ، يتم الانتهاء من خطوة التعريف والتسجيل:

 // قم بإنشاء مثيل جذر ، أي ، دع Vue مفعولًا على هذا الجذر var vm = new vue ({el: '#app' ، القالب: "<add-button> </add-button>" ، المكونات: {"add-button": {template: "<button> هذا هو زر </button>"}}}) ؛

⑤data سمات

لا يمكن إضافة سمات البيانات مباشرة إلى المكون (غير صالح) ؛

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

لذلك ، يجب أن تكون سمة البيانات وظيفة ، ثم هناك قيمة إرجاع ، وهي قيمة سمة البيانات.

ويجب أن تكون قيمة الإرجاع هذه كائنًا جديدًا (أي نسخة عميقة ، تجنب مكونات متعددة تشارك كائن) ؛

كرمز:

 var vm = new vue ({el: '#app' ، template: "<add-button> </add-button>" ، المكونات: {"add-button": {template:

أيضًا ، إذا كان هذا هو الحال ، فإن قيمة BTN هي نفسها (لأنها تشترك بالفعل في كائن)

 <div id = "app"> </viv> <div id = "app2"> </viv> <script> var obj = {btn: "123"} ؛ var vm = new vue ({el: '#app' ، template: "<add-button> </add-button>" ، المكونات: {"add-button": {template: obj.btn = "456" ؛ var vm2 = new vue ({el: '#app2' ، template: "<add-button> </add-button>" ، المكونات: {"add-button": {template: "<button> هذا زر {{btn}}} </button>" ، البيانات: وظيفة () </script>

ملحوظة:

عند استخدام سمة EL في vue.extend () ، يجب أن تكون أيضًا وظيفة.

الميزات:

[1] وفقًا للبرنامج التعليمي الرسمي ، فإن بعض عناصر HTML لها قيود على العناصر التي يمكن وضعها فيه ؛

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

【2】 أعطني عنوان URL ، إذا حدث شيء بالفعل ، سأدرسه.

http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790

ما سبق هو مثال على تحليل تعريف مكون Vuejs في الفصل الثامن من Vuejs المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!