Vue: السماح للأطفال بـ "وراثة" المكونات المسجلة للوالدين.

أي حالة استخدام العالم الحقيقي؟

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

نعم. يحتوي تطبيقي على نافذة منبثقة بها بنية معقدة من عناصر المحرر المخصص. يمكن دمج هذه العناصر في تسلسل هرمي من 3 إلى 4 مستويات ، مما يجعل من غير المجدي إعلانها صراحة لكل عنصر رئيسي (3-5 أنواع رئيسية * 10 عناصر معلنة = 50 سطرًا من التعليمات البرمجية المتكررة). كما أنه ليس من الجيد تسجيلها عالميًا لأنها لن تظهر أبدًا في أجزاء أخرى من التطبيق. لذلك أود تحميلها "محليًا".

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

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

اسمحوا لي أن أشارك انطباعي. لقد عملت مع 0.12.x وسارت الأمور بشكل جيد جدًا (باستثناء بعض الأشياء البسيطة في منحنى التعلم). واجهة برمجة تطبيقات بسيطة ونظيفة ، بناء جملة ، كود موثوق. الآن ، نحن في الإصدار 1.0.0 بيتا وأصبح الأمر أسوأ ، وليس أفضل. المزيد من تكرار الكود ، تمت إزالة الميزات التي أستخدمها مما يجعلني أعيد كتابة نفس الرمز مرارًا وتكرارًا. بدأت أعتقد أنني ارتكبت خطأ باختيار Vue بدلاً من React ، لأنني لست متأكدًا من أنه لن يكون هناك المزيد من التغييرات المفاجئة وإهدار وقتي في المستقبل.

تضمين التغريدة

1. سيكون من المفيد أكثر إذا قمت بالفعل بإدراج الأشياء المحددة التي جعلت تجربة المطورين أسوأ بالإضافة إلى هذه المشكلة.
2. 1.0.0-alpha هي إصدارات سابقة ، مما يعني عدم وجود ضمان لاستقرار API في المقام الأول. إذا كنت تقدر الاستقرار ، فيجب أن تلتزم بـ 0.12 وتنتظر 1.0 المستقر (والذي سيكون له أيضًا إصدار ترحيل نهائي). يعني استخدام الإصدار التجريبي أنك وافقت على التعامل مع تغييرات التعطيل المستمرة.
3. لم يتم إصدار 1.0.0-beta حتى. ربما لا تكون فكرة جيدة أن تستخدم فرعًا قيد العمل غير مُصدر.
4. أقوم بتصميم واجهة برمجة التطبيقات بناءً على تجربتي وتعليقات المجتمع بأكمله. يحق لك ما تعتقده ، ولا تتردد في التبديل إلى أطر أخرى إذا لم تكن التغييرات في الاتجاه الذي تريده. (في الواقع ، في React ، عليك أيضًا استيراد كل شيء بشكل صريح ، وسيتعين عليك تكرار المزيد من الأشياء.)

1. بعد قراءة المناقشة رقم 1170 ، كدت أن أتفق الآن. لكن .. لا أرى حقًا نقطة في إزالة الكود الحالي الذي قدم هذه الميزة بدلاً من مجرد جعل strict: true الخيار الافتراضي. تختلف الأذواق ، ويفضل بعض الأشخاص اتباع نهج "احتياطي" ، والذي يكون أكثر سهولة في بعض الأحيان. خاصة عندما يتم تحميل المكونات ديناميكيًا. يمكن العمل مع الخلطات والمصانع وما إلى ذلك ، لكن كل هذا يستغرق وقتًا ثمينًا.
2. أَكِيدْ. ولكن هناك دائمًا توازن بين "البنية المثالية" وتكلفة التغييرات. في هذه الحالة ، فإن بضعة أسطر من التعليمات البرمجية (أي حوالي 10) لن تؤذي أي شخص إذا تُركت تكلفني وقتًا طويلاً. ولا بد لي من استخدام هذا الإصدار غير المستقر لأنني أحتاج حقًا إلى ميزة "عوامل تصفية ربط القراءة والكتابة" التي ربما لن يتم نقلها إلى 0.12.x
3. انظر 2.
4. السؤال ليس "أي API أفضل". أنا أفضل Vue. فترة. السؤال هو "إذا كان بإمكاني الاعتماد على Vue API على المدى الطويل". الموثوقية على الوسامة. في حالة حدوث تغييرات ، يجب أن يكون هناك سبب جاد لها. في حالة بناء جملة الربط الجديد ، الذي كسر كل الكود الخاص بي - حسنًا ، فليكن ، فهو أكثر قابلية للقراءة ويفرض بنية شفرة أفضل. في هذه الحالة - كلا. قد يكون هذا التغيير غير متقطع مع تعيين options.strict = true افتراضيًا.

نعم ، تأتي الترقية دائمًا مع ألم إعادة البناء ، ولكن 1.0 هي الفرصة الوحيدة لـ Vue للتحرر من خيارات التكوين القديمة هذه. بعد 1.0 سيكون نصف صارم ، ولا يجب أن ينكسر أي شيء حتى 2.0. وأريد أن يستمر 1.x لأطول فترة ممكنة ، بسبب مشكلة الموثوقية التي تحدثت عنها.

فيما يتعلق بالوضع الصارم: من المؤكد أنه يكلف وقت إعادة البناء عندما تعتمد عليه بشدة - ولكن بشكل مثالي للمستخدمين الجدد الذين يلتقطون Vue بعد 1.0 ، فهم لا يحتاجون حتى إلى معرفة وجود هذا الشيء. يجب أن يكون سطح API صغيرًا قدر الإمكان ، ويجب أن يكون نمط الهيكلة العام متسقًا قدر الإمكان. يؤدي تمكين تعطيل الوضع المتشدد بشكل أساسي إلى تشجيع أسلوبين مختلفين من هيكلة تطبيقات Vue - تخيل أن الأشخاص يعملون على تطبيق واحد يستخدم strict: true ، ثم الانتقال إلى مشروع آخر يستخدم strict: false ... تجزئة تجربة المطور ، وأريد التخلص من هذا الاحتمال ، و 1.0 هو المكان المعقول الوحيد للقيام بذلك.

من المؤسف أن تكون عالقًا في منتصف هذا الانتقال ، وأنا أقدر ملاحظاتك. ولكن ما يجب القيام به يجب القيام به.

@ yyx990803 أستطيع أن أرى حالة استخدام ملموسة أنا عالق بها نوعًا ما.

ما أحاول القيام به

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

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

المشكلة

أريد تجنب تسجيل هذه الحاجيات عالميًا (أسباب التوافق).
نظرًا لأن المكونات مبنية وتحميلها ديناميكيًا ، فأنا بحاجة إلى تسجيل جميع المكونات في كل مكونات يمكن أن تحتوي على عناصر فرعية. يؤدي ذلك إلى الكثير من عمليات التسجيل التي قد لا يتم استخدامها. انظر ما أعنيه (يرجى ملاحظة أنه في الوقت الحالي لم أحاول التسجيل المحلي للمكونات ، وإجراء الاختبارات مع التسجيل العالمي):

var components = {

    appComponents: {
       template: "...",
       components: components
    },

    appComponents2: {
       template: "...",
       components: components
    },

    widgetComponents: {
       template: "...",
       components: components
    },

    widgetComponents2: {
       template: "...",
       components: components
    },

}

هل هناك اختناق في الأداء عند القيام بذلك؟

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

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

في يوم الاثنين 22 أغسطس 2016 الساعة 16:00 كتب سفيان غزال [email protected] :

@ yyx990803 https://github.com/yyx990803 يمكنني رؤية حالة استخدام ملموسة
أنا عالق نوعا ما مع.

_ما الذي أحاول فعله_

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

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

_المشكلة_

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

مكونات var = {

appComponents: {
   template: "...",
   components: components
},

appComponents2: {
   template: "...",
   components: components
},

}

_ هل هناك اختناق في الأداء عند القيام بذلك؟ _

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241339596 ، أو كتم الصوت
الخيط
https://github.com/notifications/unsubscribe-auth/AFTLl6QDePtH93VOU2lgrC72Z0vKLsv-ks5qiVcXgaJpZM4F7M1v
.

fnlctrl الأمر لا يتعلق بالتسجيل العالمي.

المشكلة هي

• سجل التسجيل العالمي لجميع مثيلات مكون vue +.
• سجلات التسجيل المحلية للمكون الحالي فقط
• ولا توجد طريقة للتسجيل في "شبه عالمي" للجذر والأطفال: شيء يسمح بالتسجيل لمثيل vue الحالي (بما في ذلك المكونات المضافة في هذه الحالة أيضًا).

في رأيي ، تكمن المشكلة في أن vue هي الطريقة الثابتة (العالمية) ، لكنها مقيدة بالطريقة المعبأة / القابلة للتوزيع (المحلية).

التسجيل في semi-global ممكن بالفعل لأن Vue لديه وراثة نموذجية.
https://jsfiddle.net/fnlCtrl/32dt9e9g/

تضمين التغريدة
لست متأكدًا من فهم ما تريد إظهاره باستخدام الكمان الذي أرسلته (يرجى ملاحظة أن مثالك يحتوي على خطأ: Unknown custom element: <bar> - did you register the component correctly? )

لست واضحًا بما فيه الكفاية ، ربما لم تفهم ما أريد أن أشرح. لنبدا مجددا:

ما أريد أن أوضحه هو أنه يمكننا:

• مكونات التسجيل العالمية مع Vue.component('name', {...}) (وهذا مثالي لتطبيق الصفحة الواحدة)
• تسجيل مكون محليًا في مكون new Vue({ components: {...} }); (من الجيد شحن المكونات مع التبعيات لإعادة الاستخدام المحلي)

لكن لا يمكننا توفير المكونات من الوالدين للأطفال. شيء مثل تسجيل المكونات بشكل عام لمثيل vm الحالي وجميع المكونات التي تم تحميلها في هذه الحالة ، ولكن ليس للمكونات التي تم تحميلها في مثيلات vm الأخرى. انظر المثال: https://jsfiddle.net/p8wqafm1/2/

هل تفهم؟

عفوًا ، يبدو أنه لم يتم حفظ كمبي بشكل صحيح ..
هذا هو الذي كنت أنوي أن أعرضه لكم ..
https://jsfiddle.net/fnlCtrl/32dt9e9g/1/

أنا أقرأ مثالك الآن.

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

fnlctrl شكرًا على مثالك ولكن يبدو أنه لا يغطي ما أحاول تحقيقه حتى الآن.

باستخدام الطريقة في المثال الخاص بك ، يتم تسجيل المكون في Foo فقط ، لكن هذا لا يجعلهم متاحين في أطفال $ Foo ( Bar في هذا المثال).

انظر إلى الكمان ، أسجل Baz في Foo وأود أن يكون متاحًا في Bar لأنه يتم تحميله من Foo : https: // jsfiddle .net / 8y0Lmb01 / 3 /

تشعب مثالك: https://jsfiddle.net/fnlCtrl/uvzaotaz/

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

fnlctrl في المثال الخاص بك لم يعد Baz متاحًا في Foo بعد الآن.

للقيام بذلك ، يمكنني استخدام Vue.component('baz', {...} ولكن المشكلة هي أنه "يلوث" مثيل vue الآخر باستخدام هذا المكون baz .

أو

يمكنني تسجيل Baz في كلٍّ من Foo و Bar ، وجميع الأطفال foo ، وجميع أطفال الحانات ، وجميع Foo Grand Children ، إلخ ... ولكن هذا يضيف الكثير من التعقيد في حالة التطبيق الكبير / الديناميكي

هل ترى ما اعني؟ بإمكاني التسجيل محليًا ، لكن لا يمكننا أن نرث مكونات للأبناء والأحفاد ... من المكونات الحالية _ فقط_

نعم أرى وجهة نظرك الآن. آسف لأنني لم أكن على علم بذلك التسجيل
المكون ضمن Foo لا يجعله عالميًا داخل نطاق Foo ، على عكس
Vue.component. سوف ننظر في المصدر لمعرفة السبب.

في يوم الاثنين 22 أغسطس 2016 الساعة 20:17 كتب سفيان غزال [email protected] :

fnlctrl https://github.com/fnlctrl في مثالك لا يتوفر Baz
في Foo بعد الآن.

للقيام بذلك يمكنني استخدام Vue.component ('baz'، {...} ولكن المشكلة هي
سيؤدي إلى "تلويث" مثيل vue الآخر باستخدام مكون baz هذا.

أو

يمكنني تسجيل Baz في كل من Foo and Bar ، وجميع الأطفال الصغار ، و
كل الأطفال ، وجميع أطفال Foo Grand Children ، وما إلى ذلك ... ولكن هذا يضيف الكثير
التعقيد في حالة التطبيق الكبير / الديناميكي

هل ترى ما اعني؟ يمكنني التسجيل محليًا ، لكن لا يمكننا أن نرث
مكونات للأطفال ، والأحفاد ، ... من المكونات الحالية
_فقط_

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119 ، أو كتم الصوت
الخيط
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

شكرا :)

النقطة المهمة هي أنني أرغب في شحن مكتبة مستقلة تعتمد على vue ، فإن تسجيل المكونات لحالات معينة سيكون بمثابة فائدة حقيقية ، لأنه على أي حال ، كمكتبة مستقلة ، لا يُسمح لي بتسجيل ذلك في مثيل Vue العالمي ( من شأنه أن يكسر الجزء المستقل).

من فضلك ، اسمحوا لي أن أعرف ما إذا كان ما كنت أتحدث عنه قد يكون متضمنًا في Vue

حسنًا ، أعتقد أن السبب كان واضحًا جدًا لدرجة أنني أغفل: لم أكن كذلك
باستخدام new Foo() ...

سوف أحصل على كمان في 20 دقيقة ، في رحلتي للمنزل.

في الإثنين ، 22 أغسطس 2016 ، 20:27 宋 铄运كتب [email protected]:

نعم أرى وجهة نظرك الآن. آسف لأنني لم أكن على علم بذلك التسجيل
المكون ضمن Foo لا يجعله عالميًا داخل نطاق Foo ، على عكس
Vue.component. سوف ننظر في المصدر لمعرفة السبب.

في الاثنين 22 أغسطس 2016 الساعة 20:17 سفيان غزال إخطارات github.com
كتب:

fnlctrl https://github.com/fnlctrl في مثالك ليس باز
متاح في Foo بعد الآن.

للقيام بذلك يمكنني استخدام Vue.component ('baz'، {...} ولكن المشكلة هي
سيؤدي إلى "تلويث" مثيل vue الآخر باستخدام مكون baz هذا.

أو

يمكنني تسجيل Baz في كل من Foo and Bar ، وجميع الأطفال الصغار ، و
كل الأطفال ، وجميع أطفال Foo Grand Children ، وما إلى ذلك ... ولكن هذا يضيف الكثير
التعقيد في حالة التطبيق الكبير / الديناميكي

هل ترى ما اعني؟ يمكنني التسجيل محليًا ، لكن لا يمكننا أن نرث
مكونات للأطفال ، والأحفاد ، ... من المكونات الحالية
_فقط_

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119 ، أو كتم الصوت
الخيط
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

حسنًا ، new Foo(...) لم يعمل جيدًا: https://jsfiddle.net/8y0Lmb01/5/

غريب حقا ... https://jsfiddle.net/fnlCtrl/p0ggkncu/
النظر فيه الآن.

لقد قرأت بعضًا من التعليمات البرمجية المصدر ، ووجدت أنه في Vue نفسها ، يمكننا الاختراق مثل هذا:
https://jsfiddle.net/fnlCtrl/522aw9sm/
(بدون استخدام Vue.

على الرغم من أن نفس الأسلوب لا يعمل على Vue ممتد:
https://jsfiddle.net/fnlCtrl/v1m2s16u/

لذلك أفترض أن سبب المشكلة هو دقة المكونات. سأستمر في البحث.

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

أعتقد أن هذه التعليقات حول resolveAsset

حل الأصول.
يتم استخدام هذه الوظيفة لأن النسخ الفرعية تحتاج إلى الوصول
إلى الأصول المحددة في سلسلة أسلافها.

يقترح أنه من المفترض أن يعمل تسجيل المكونات على Vue الموسع.

الكود في جسم الوظيفة لا ينظر إلى سلسلة الأسلاف ، أليس كذلك؟ ربما لم يتم تنفيذه بعد؟

لا أعرف ما يكفي حتى الآن ، ما زلت أتعلم سلوكها ، لكني أعتقد أن "سلسلة السلف" تشير إلى المعلمة الأولى options .

أعتقد أنني أستطيع أن أستنتج أن السبب هو هذا (src / core / global-api / extension) .
يجعل الفصول الموسعة تستخدم نفس طريقة والديهم.

لقد اختبرت ذلك ، إذا قمت بنسخ ما هو موجود في core / global-api / الأصول (استخدم الكود المقابل داخل إصدار dist الذي تم تجريده من الأنواع ، بالطبع)
إلى vue.extend ، لجعلها تبدو هكذا (قم بتغيير Vue إلى Sub ):

config._assetTypes.forEach(function (type) {
        Sub[type] = function (id, definition) {
          if (!definition) {
            return this.options[type + 's'][id];
          } else {
            /* istanbul ignore if */
            if ("development" !== 'production') {
              if (type === 'component' && config.isReservedTag(id)) {
                warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);
              }
            }
            if (type === 'component' && isPlainObject(definition)) {
              definition.name = definition.name || id;
              definition = Sub.extend(definition);
            }
            if (type === 'directive' && typeof definition === 'function') {
              definition = { bind: definition, update: definition };
            }
            this.options[type + 's'][id] = definition;
            return definition;
          }
        };
      });

سيعمل Foo = Vue.extend() و Foo.component() .

على الرغم من أنني أعتقد أن هذا سيؤدي إلى بعض عقوبة الأداء.

gsouf وأعتقد أنني وجدت آخر قطعة من اللغز (حل بديل بدون تعديل النظرة):
https://jsfiddle.net/fnlCtrl/v1m2s16u/

var Root = Vue.extend()

Root.options.components.Foo = Root.extend({
    template: '<div>Foo</div>'
})

Root.options.components.Bar = Root.extend({
    template: '<div>Bar, uses <foo></foo></div>'
})

new Root({
    template: `
  <div>
    <foo></foo>
    <bar></bar>
  </div>
  `
}).$mount('#app')

مرحبًا fnlctrl ، شكرًا على الإخراج وآسف للتأخير.

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

في حالتك يظل مرتبطًا بمُنشئ ، وليس بمثيل ، فأنا أبحث عنه ليكون جزءًا من المثيل فقط

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

createVueInstance = function(el, data){
    var vExtend = Vue.extend();
    vExtend.partial('some-semiglobal-partial', "...");
    vExtend.component('some-semiglobal-component', vExtend.extend({...}));

    return new vExtend({
        el: el,
        data: data
    });
};

بعد التحقق من كيفية بناء النواة ، لا يبدو أنه تم بناؤه للسماح بالتكامل السهل للمكونات المتاحة لكل مثيل وهذا الحل مستقر بدرجة كافية بالنسبة لي.

شكرا لمساعدتك!

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

gsouf اهلا وسهلا بك. أعتقد أن هذه المسألة كافية لمن يريدون تطبيق خاصية مشابهة: ابتسم:

لدي هنا حالة استخدام "شبه عالمية":

لدي مكون تخطيط عالمي نسبيًا ، ولكن المحتوى قابل للتكوين بواسطة المكونات التي تستخدم مكون التخطيط ، على سبيل المثال. يستخدم المكون A Layout ويريد تكوين محتواه مع المكون B ، وقد يستخدم بعض المكونات الأخرى Layout وتكوين محتواه مع المكون C ، إلخ.

هل يجب دعم هذا النمط؟

أم أن هناك أي حل لاستبدال هذا التصميم؟

يستخدم النمط على نطاق واسع في iOS لتحسين إعادة استخدام الكود وهذا تصميم مرن.

hpsoar ما تحتاجه على الأرجح هو الفتحات

تصميمي هو كما يلي ، سيسمح لي هذا بشكل أساسي بعمل شيئين مع الخلية:

1. تكوين بسيط للخلية بنمط css ، والذي سيكون كافياً للعديد من الحالات ؛
2. أدخل مكونًا في الخلية ، والذي سيتم استخدامه للحالات الخاصة.

<template>
  <div class="tile is-ancestor">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="table-responsive">
          <table class="table is-bordered is-striped is-narrow">
            <thead>
            <tr>
              <th v-for="c in columns">
                {{c.title}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in items">
              <template v-for="c in columns">
                <td v-if="c.hasOwnProperty('component')"><div :is="c.component"></div></td>
                <td v-else>{{ item[c.name] }}</td>
              </template>
            </tr>
            </tbody>
          </table>
        </div>
      </article>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  props: [
    'columns',
    'items'
  ],
  data: function () {
    return {
    }
  }
}

</script>

<style lang="scss" rel="stylesheet/scss">
  .table-responsive {
    display: block;
    width: 100%;
    min-height: .01%;
    overflow-x: auto;
  }
</style>