Vue: अप्रत्याशित "स्लॉट की डुप्लिकेट उपस्थिति"

नमस्कार @ Kelin2025

V2.5 में, scoped-slot में कुछ बदलाव हुए, आप उनके माध्यम से यहां जा सकते हैं - https://gist.github.com/yyx990803/9bdff05e5468a60ced06a29c39114c6b#simplified -scoped-switch-use

इससे आपका भ्रम दूर हो सकता है

हाँ, मुझे यह पता है, लेकिन मुझे वास्तव में समझ नहीं आ रहा है कि मुझे यह त्रुटि क्यों मिली, स्लॉट के कोई __duplicates__ नहीं हैं, लेकिन केवल रेंडर हैं।

ऐसा लगता है कि स्कोप किए गए स्लॉट के अंदर एक स्लॉट एक से अधिक बार प्रस्तुत किया गया है।

@ जस्टीनो इसे फिर से बदलाव पर प्रस्तुत किया जा रहा है, लेकिन इससे समस्याएँ पैदा नहीं होनी चाहिए, मुझे लगता है: सोच:

मेरे 2 सेंट।

यहाँ इस मुद्दे का एक और प्रजनन है (https://codesandbox.io/s/m5kl6p97qx)। केवल एक बार मोडल दिखाए जाने के बाद चेतावनी को उठाए जाने की सूचना दें।

दूसरी ओर, उसी घटक का JSX संस्करण कोई चेतावनी नहीं दे रहा है (https://codesandbox.io/s/k0wpj60z5r)।

मैं एक ही चीज का अनुभव कर रहा हूं। स्लॉट-स्कोप के अंदर पुन: रेंडर करने वाली कोई भी चीज़ डुप्लिकेट स्लॉट उपस्थिति के बारे में चेतावनी देती है।

मुद्दा यहां इस लाइन पर यहां लगता है । एक बार स्लॉट्स को एक बार प्रस्तुत करने के बाद, उस ब्लॉक के बाद के निष्पादन में slotNodes._rendered सच होते हैं, संभवतः पहले रेंडर से।

मुझे लगता है कि कुछ को फिर से स्थापित करने पर झूठे को स्थापित करना चाहिए, लेकिन फिर से मुझे लगभग कुछ भी नहीं पता है कि कैसे हुड के नीचे काम करता है ताकि एक जंगली अनुमान हो।

यह बग एक अप्रत्याशित किनारे के मामले जैसा लगता है, लेकिन यह मेरे लिए हाल ही में एक दो बार हुआ है। मैं रेंडरलेस घटकों को लिखने के पैटर्न का बहुत बड़ा प्रशंसक हूं, जिन्हें कंक्रीट कार्यान्वयन के साथ जोड़ा जा सकता है, और जब यह समस्या उत्पन्न हो रही है, तो उपभोक्ता से सामग्री को कंक्रीट कार्यान्वयन में पारित करने की कोशिश कर रहा है।

इसे इस्तेमाल करे:
मेरा घटक:

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

एप्लिकेशन:

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

खासकर जब "स्लॉट" "वी-फॉर" में

ध्यान दें कि यदि आप Vue.js ifv2.4.x का उपयोग कर रहे हैं, तो आप इस त्रुटि को देख सकते हैं यदि आप slot-scope का उपयोग करने का प्रयास कर रहे हैं (यही मेरे लिए चल रहा था)।

समाधान या तो Vue.js को -2.5 में अपडेट करने या "स्लॉट-स्कोप" के बजाय "स्कोप" का उपयोग करने के लिए है:

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

आशा है कि किसी और को इसे गूगल पर खोजने में मदद करता है जैसे मैंने किया!

पुनश्च। यदि आप Vue.js 2v2.4.x का उपयोग कर रहे हैं, तो याद रखें कि आपको <template> तत्व का उपयोग करने की आवश्यकता होगी - आप ellaneous2.5 तक किसी भी विविध तत्व पर स्लॉट स्कोप सीमा नहीं डाल सकते हैं। ।एक्स। थोड़ा वास्तविक दुनिया का उदाहरण:

      <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 पर यह मुद्दा है।

जब रेंडरलेस कंपोनेंट एब्स्ट्रक्शन बनाने की कोशिश की जाती है तो यह वास्तव में कष्टप्रद होता है, क्योंकि यह काफी बार आता है।