Vue: تمرير المكون إلى الفتحة المسماة المتداخلة للأحفاد سيتم حلها في الفتحة الافتراضية.

تم إنشاؤها على ٣ نوفمبر ٢٠١٧  ·  5تعليقات  ·  مصدر: vuejs/vue

الإصدار

2.5.2

رابط الاستنساخ

https://jsfiddle.net/daxchen/k75y6tu0/

خطوات التكاثر

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

لذلك قمت بإنشاء مكون يسمى LayoutDefault كأساس لاستخدام التخطيطات الأخرى. ولأنني أريد أن أكون قادرًا على استبدال شريط الأدوات الافتراضي عند الحاجة ، فقد وضعت شريط الأدوات الافتراضي في <slot name="toolbar"> ، مع Toolbar كمحتوى احتياطي.

مقتطف الشفرة:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

أنا أصنع هذا النوع من المكونات لأنني أريد أن أكون قادرًا على:

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

ثم في مكونات التخطيط الأخرى ، أفعل هذا:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

كما ترى ، لتمرير المكونات إلى فتحات الحفيد ، استخدمت هذا النمط: <slot name="foo" slot="foo"> .

لسبب ما ، سيتم تمرير المكونات التي تم تمريرها باستخدام هذا النمط إلى الفتحة الافتراضية إذا كانت موجودة.

انظر الأمثلة 2 و 3 و 4 في النسخ.

ما هو متوقع؟

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

ما الذي يحدث بالفعل؟

في المثال 2 ، يتم عرض Toolbar تم استبداله في الفتحة الافتراضية لـ LayoutDefault .

في المثالين 3 و 4 ، تم تمرير SearchBar إلى slot="toolbarSlot" ، لكن لم يتم تقديمها.


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

bug

التعليق الأكثر فائدة

راجع للشغل هذا خرج بالفعل في 2.5.3 :)

ال 5 كومينتر

واو هذا مذهل!
تم استنساخه وبناءه واختباره ، فهو يعمل !!
إيفان أنت الأفضل ~~~
شكرا جزيلا لك!!!

راجع للشغل هذا خرج بالفعل في 2.5.3 :)

هل يعمل هذا أيضًا مع نطاق الفتحة في 2.5.3؟ :)

faragos إليكم كيف أنجزت تمرير الفتحات إلى حفيد يستخدم نطاق الفتحات.

https://jsfiddle.net/alexm/5hx43mb2/

@ alex-martinez شكرًا لنشر الحل الخاص بك ، لقد كانت مساعدة كبيرة :)

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات