Vue: Unerwartetes "doppeltes Vorhandensein eines Steckplatzes"

Hallo @ Kelin2025

In Version 2.5 gab es einige Änderungen in scoped-slot . Sie können diese hier durchgehen - https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-usage

Dies könnte Ihre Verwirrung lösen

Ja, ich weiß es, aber ich verstehe nicht wirklich, warum ich diesen Fehler erhalte. Es gibt keine __Duplikate__ des Slots, sondern nur das erneute Rendern.

Es sieht so aus, als würde ein Slot in einem Slot mit Gültigkeitsbereich mehr als einmal gerendert.

@ Justineo es wird bei Änderungen neu gerendert, aber es sollte keine Probleme verursachen, denke ich: Denken:

Meine 2 Cent.

Hier ist eine weitere Reproduktion dieses Problems (https://codesandbox.io/s/m5kl6p97qx). Beachten Sie, dass die Warnung nur ausgelöst wird, wenn das Modal mehr als einmal angezeigt wird.

Andererseits gibt die JSX-Version derselben Komponente keine Warnung aus (https://codesandbox.io/s/k0wpj60z5r).

Ich erlebe das Gleiche. Alles, was ein erneutes Rendern innerhalb des Slot-Bereichs auslöst, führt zu einer Warnung vor dem Vorhandensein eines doppelten Slots.

Das Problem scheint hier in dieser Zeile hier zu sein . Sobald die Slots einmal gerendert wurden, haben nachfolgende Ausführungen dieses Blocks slotNodes._rendered als wahr, vermutlich vom ersten Rendern an.

Ich würde mir vorstellen, dass etwas das auf false zurücksetzen sollte, wenn ein erneutes Rendern ausgelöst wird, aber zugegebenermaßen weiß ich fast nichts darüber, wie Vue unter der Haube funktioniert, also ist das nur eine wilde Vermutung.

Dieser Fehler scheint ein unwahrscheinlicher Randfall zu sein, aber er ist mir in letzter Zeit ein paar Mal passiert. Ich bin ein großer Fan des Musters, renderlose Komponenten zu schreiben, die mit konkreten Implementierungen gepaart werden können, und der Versuch, den Inhalt vom Verbraucher in die konkrete Implementierung zu übertragen, tritt auf, wenn dieses Problem auftritt.

Versuche dies:
meine Komponente:

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

App:

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

besonders wenn "slot" in "v-for"

Beachten Sie, dass bei Verwendung von Vue.js ≤v2.4.x dieser Fehler möglicherweise angezeigt wird, wenn Sie versuchen, slot-scope (das war für mich der Fall).

Die Lösung besteht darin, entweder Vue.js auf ≥2,5 zu aktualisieren oder "scope" anstelle von "slot-scope" zu verwenden:

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

Hoffe, das hilft allen anderen, dies auf Google zu finden, so wie ich!

PS. Wenn Sie Vue.js ≤v2.4.x verwenden, denken Sie daran, dass Sie ein <template> -Element verwenden müssen. Sie können nicht einfach eine Slot-Scope-Grenze für verschiedene Elemente festlegen, bis ≥2,5 .x. Ein kleines Beispiel aus der Praxis:

      <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>

Die Lösung besteht darin, entweder Vue.js auf ≥2,5 zu aktualisieren oder "scope" anstelle von "slot-scope" zu verwenden:

Ich habe immer noch dieses Problem mit 2.5.17 .

Es ist wirklich ärgerlich, wenn versucht wird, renderlose Komponentenabstraktionen zu erstellen, da dies ziemlich häufig vorkommt.