Vue: غير متوقع "وجود مكرر للفتحة"

مرحبا @ Kelin2025

في الإصدار 2.5 ، كانت هناك بعض التغييرات في scoped-slot ، يمكنك الاطلاع عليها هنا - https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-Usage

هذا قد يحل حيرتك

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

يبدو أنه تم عرض فتحة داخل فتحة محددة النطاق أكثر من مرة.

Justineo يتم إعادة تقديمه على التغييرات ولكن لا ينبغي أن يسبب مشاكل ، على ما أعتقد: التفكير:

2 سنتي.

إليك نسخة أخرى من هذه المشكلة (https://codesandbox.io/s/m5kl6p97qx). لاحظ التحذير الذي يتم رفعه فقط بمجرد عرض الصيغة أكثر من مرة.

من ناحية أخرى ، فإن إصدار JSX لنفس المكون لا يثير أي تحذير (https://codesandbox.io/s/k0wpj60z5r).

أنا أعاني من نفس الشيء. أي شيء يؤدي إلى إعادة تصيير داخل نطاق الفتحة يتسبب في تحذير بشأن وجود تكرار في الفتحة.

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

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

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

جرب هذا:
المكون الخاص بي:

<template>
    <slot :someprop="value"></slot>
</template>

تطبيق:

<my-component>
    <template slot-scop="someprop">{{ prop }} ... and do something else</template>
</my-component>

خاصة عندما تكون "فتحة" في "v-for"

لاحظ أنه إذا كنت تستخدم Vue.js ≤v2.4.x ، فقد ترى هذا الخطأ إذا كنت تحاول استخدام slot-scope (هذا ما كان يحدث بالنسبة لي).

الحل هو إما تحديث Vue.js إلى ≥2.5 أو استخدام "نطاق" بدلاً من "نطاق الفتحة":

_ https://vuejs.org/v2/api/#scope -replaced_

آمل أن يساعد ذلك أي شخص آخر في العثور على هذا على google كما فعلت!

ملاحظة. إذا كنت تستخدم Vue.js ≤v2.4.x ، فتذكر أنك ستحتاج إلى استخدام عنصر <template> - لا يمكنك فقط وضع حد لنطاق الفتحة على أي عنصر متنوع حتى ≥2.5 .x. مثال صغير من العالم الحقيقي:

      <div class="form-group col-md">
        <label>Autocomplete field 4 (w/ custom search results):</label>
        <autocomplete v-model="autocompleteExampleValue4" action="listGlobalSearchResults" :handle-formatting-response-data="handleFormattingDummySearchResults" placeholder="This one has a custom placeholder too">
          <template slot="search-result-item" scope="slotData"><!-- Note that you can use destructuring here, but it only works in modern browsers -- otherwise you have to define a separate variable -- like scope="slotData" and then use {{slotData.id}}... (see https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope) -->
            <!-- TODO: update to vue ≥ 2.5.0 to allow this slotData thing to be attached w/o using a template element.  Also when we do that, "scope" will become "slot-scope".  See https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots for more info -->
            <span>{{slotData.searchResult.label}}</span>
          </template>
        </autocomplete>
      </div>

الحل هو إما تحديث Vue.js إلى ≥2.5 أو استخدام "نطاق" بدلاً من "نطاق الفتحة":

لا يزال لدي هذه المشكلة على 2.5.17 .

إنه أمر مزعج حقًا عند محاولة بناء تجريدات لمكونات لا تصدّق ، لأن هذا يحدث كثيرًا.