هذه المقالة تأتي من الوثيقة الرسمية:
http://cn.vuejs.org/guide/components.html#props
هذا البرنامج التعليمي هو برنامج تعليمي أكثر تفصيلًا وأكثر شمولاً تم تجميعه بواسطة المحرر مع المستندات الرسمية ، وهو مناسب بشكل خاص للمبتدئين للقراءة.
تسليم البيانات الدعائم
①scope من مثيلات المكون:
إنه معزول ، وببساطة ، لا تتم مشاركة القيم بين المكونات ، حتى لو كانت هناك سمة تحمل نفس الاسم.
<div id = "app"> <add> </dev> <del> </fel> </viv> <script> var vm = new vue ({el: '#app' ، المكونات: {"add": {template: "<button> btn: {{btn}} {template: "<NUNTER> BTN: {{btn}} </utton>" ، data: function () {btn: "456"} ؛ </script>نتيجة التقديم هي:
أزراران ، أول واحد لديه قيمة 123 والثاني لديه قيمة 456 (على الرغم من أنهما كلاهما BTN)
② استخدم الدعائم لربط البيانات الثابتة:
[1] يتم استخدام هذه الطريقة لتمرير السلاسل ، ويتم كتابة القيمة على العنصر المخصص للمكون الأصل.
【2】 لا يمكن للمثال التالي تمرير القيمة في سمة البيانات للمكون الأصل
【3】 سوف يكتب قيمة نفس الاسم في سمة بيانات القالب.
نموذج الرمز:
<div id = "app"> <add btn = "h"> </add> </viv> <script> var vm = new vue ({el: '#app' ، data: {h: "hello"} ، components: {"add": {props: ['btn'] ، tamplate: Return {BTN: "123"} ؛ </script>بموجب طريقة الكتابة هذه ، فإن قيمة BTN هي H ، وليس 123 ، أو مرحبًا.
【4】 طريقة كتابة الجمل
إذا كان الاستيفاء جمل ،
في علامة HTML ، نظرًا لأن خصائص HTML غير حساسة للحالة (مثل Li و LI هي نفسها) ، يجب أن يتم تمرير القيم التي سيتم تمريرها في علامة HTML كخط أفقي قصير (مثل BTN-Test) لتكون حساسة للحالة.
في صفيف الدعائم ، يجب أن يكون متسقًا مع الاستيفاء والمكتوب على أنه جمل (مثل btntest).
على سبيل المثال:
الدعائم: ['btntest'] ، القالب: "<button> btn: {{btntest}} </utton>" ،الكتابة الصحيحة:
<إضافة btn-test = "h"> </add>
إذا تم كتابة الاستيفاء في نوع خط أفقي قصير ، أو يتم كتابة علامة HTML بأسلوب الجمل ، فلن يصدر ساري المفعول بشكل طبيعي. (ما لم تتم كتابة الاستيفاء على أنه تخطي الجمل حدود القضية)
③ البيانات الديناميكية باستخدام الدعائم:
ببساطة ، هو جعل بعض الاستيفاء لمكون الطفل يتوافق مع بيانات المكون الأصل.
الطريقة القياسية لكتابتها هي (باستخدام v-bind):
<إضافة v-bind: قيمة المكون الطفل = "خاصية المكون الأصل"> </add>
كرمز
<div id = "app"> <add v-bind: btn = "h"> </div> </viv> <script> var vm = new vue ({el: '#app' ، data: {h: "hello"} ، components: {"add": {props: ['btn' ، temp: () {return {'btn': "123"} ؛ </script>يوضح:
【1】 قيمة H في بيانات المكون الأصل المستخدمة من قبل BTN ؛
【2】 يتم كتابة قيمة الإرجاع في وظيفة بيانات مكون الطفل.
[3] وبعبارة أخرى ، يتم استخدام قيمة المكون الأصل (استنادًا إلى اسم السمة) ، ويتم استخدام قيمة الملصق كسلسلة.
【4】 لا يزال يحتاج إلى استخدام الدعائم ، وإلا فإنه سيستخدم قيمة BTN في بياناتها
④ بناء جملة وديناميكي:
[1] ببساطة ، إذا لم تقم بإضافة Bind ، فأنت تمر بكمية حرفية ، أي أنك تعامل كسلسلة (على سبيل المثال ، 1 هي أيضًا سلسلة ، وليس نوعًا من الأرقام) ؛
【2】 أضف v-bind ، يتم تمرير تعبير JS (بحيث يمكن تمرير قيمة المكون الأصل) ؛
【3】 بعد إضافة Bind ، إذا كان يمكن العثور على قيمة المكون الأصل ، فسيتم استخدام قيمة المكون الأصل ؛ إذا لم يكن هناك تعبير مقابل ، يُعتبر تعبير JS (على سبيل المثال ، يعتبر 1+2 3 ، {A: 1} يعتبر ككائن) ؛
كرمز:
<div id = "app"> <add v-bind: btn = "1+2"> </add> </viv> <script> var vm = new vue ({el: '#app' ، data: {h: "hello"} ، components: {"add": }}) ؛ </script>قيمة BTN هنا هي 3 (بدلاً من 1+2 كسلسلة دون إضافة V-bind)
⑤ نوع الربط بين:
[1] ببساطة ، يتم تقسيمها إلى نوعين ، وهما الربط في اتجاه واحد (يمكن أن يؤثر المكون الأصل على مكون الطفل ، ولكن العكس غير ممكن) والربط ثنائي الاتجاه (يمكن أن يؤثر المكون الطفل أيضًا على المكون الأصل) ؛
【2】 مثال ربط واحد في اتجاه واحد: (افتراضي ، أو استخدام .ENCE)
<div id = "app"> المكون الأصل: <input v-model = "val"> <br/> مكون الطفل: <test v-bind: test-val = "val" v-model = 'testval'/> "}}}) ؛ </script>
يوضح:
عندما يتم تغيير قيمة المكون الأصل ، تتغير قيمة مكون الطفل أيضًا ؛
عند تغيير قيمة مكون الطفل ، لن تتغير قيمة المكون الأصل. إذا تم تعديل قيمة المكون الأصل مرة أخرى ، فسيتم مزامنة مكون الطفل مرة أخرى.
تجدر الإشارة أيضًا إلى أنه إذا أراد مكون الطفل أن يكون ملزماً بشكل متزامن ، فإن إدخال مكون الطفل يحتاج إلى أن يكون نموذج V ، وليس سمة قيمة (يمكن أن تكون فقط ملزمة عناصر واحدة ، وسيتم فقد الربط بعد تعديل قيمة المكون الطفل)
【3】 ربط ثنائي الاتجاه:
".sync" مطلوب كمعدل
كمثال:
<div id = "app"> المكون الأصل: <input v-model = "val"> <br/> مكون الطفل: <test: test.sync = "val" v-model = 'test'/> "}}}) ؛ </script>
التأثير هو أنه بغض النظر عن القيمة التي تغيرها ، فإن الآخر سيتغير وفقًا لذلك.
【4】 التحقق من الدعائم:
ببساطة ، عندما يحصل المكون على البيانات ، يتم استخدامه للتحقق ، وسيتم استخدامه فقط إذا واجهت الظروف.
تتمثل طريقة الكتابة في تحويل الدعائم إلى كائن ما ، والقيمة التي يتم التحقق منها هي مفتاح الكائن ، وشرط التحقق هو القيمة المقابلة للمفتاح.
على سبيل المثال:
الدعائم: {test: {twoway: true}} ،تحقق من أن متغير الاختبار هو ربط ثنائي الاتجاه ، وإذا لم يكن كذلك ، فسيتم الإبلاغ عن خطأ. (لاحظ أنه لا يمكن استخدام هذا للتحقق من الربط في اتجاه واحد).
رمز العينة كما يلي:
<div id = "app"> المكون الأصل: <input v-model = "val"> <br/> مكون الطفل: <test: test = "val"> </test> </div> <script> var vm = new vue ({el: '#app' ، data: {val: 1} v-model = 'test'/> "}}}) ؛ </script>لمزيد من أنواع التحقق ، يرجى الاطلاع على البرنامج التعليمي الرسمي:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
ما سبق هو شرح مفصل لنطاق المكون وأمثلة نقل البيانات الدعائم للمقال التاسع لـ Vuejs الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!