تشير هذه المقالة إلى المستندات الرسمية لتجميع رمز أكثر تفصيلًا وهو أكثر أمانًا تعليميًا للمبتدئين للقراءة والتعلم.
هذه المقالة تأتي من الوثيقة الرسمية:
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!