Vue: "Presencia duplicada de ranura" inesperada

Hola @ Kelin2025

En la versión 2.5, hubo algunos cambios en scoped-slot , puede revisarlos aquí: https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#simplified -scoped-slots-use

Esto podría resolver tu confusión

Sí, lo sé, pero realmente no entiendo por qué recibo este error, no hay __duplicados__ de ranura, solo reenvío.

Parece que una ranura dentro de una ranura con ámbito se representa más de una vez.

@Justineo se está volviendo a renderizar en los cambios, pero no debería causar problemas, creo: pensando:

Mis 2 centavos.

Aquí hay otra reproducción de este número (https://codesandbox.io/s/m5kl6p97qx). Observe que la advertencia se genera solo una vez que el modal se muestra más de una vez.

Por otro lado, la versión JSX del mismo componente no genera ninguna advertencia (https://codesandbox.io/s/k0wpj60z5r).

Estoy experimentando lo mismo. Cualquier cosa que provoque una repetición dentro del alcance de la ranura provoca una advertencia sobre la presencia de una ranura duplicada.

El problema parece estar aquí en esta línea . Una vez que las ranuras se han renderizado una vez, las ejecuciones posteriores de ese bloque tienen slotNodes._rendered como verdadero, presumiblemente desde el primer renderizado.

Me imagino que algo debería volver a establecer eso en falso cuando se activa una nueva renderización, pero es cierto que no sé casi nada sobre cómo funciona Vue bajo el capó, así que eso es solo una suposición salvaje.

Este error parece un caso extremo poco probable, pero me ha sucedido un par de veces recientemente. Soy un gran admirador del patrón de escribir componentes sin renderizado que se pueden emparejar con implementaciones concretas, y tratar de pasar el contenido del consumidor a la implementación concreta es cuando surge este problema.

prueba esto:
mi-componente:

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

aplicación:

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

especialmente cuando "ranura" en "v-for"

Tenga en cuenta que si está usando Vue.js ≤v2.4.x, entonces puede ver este error si está intentando usar slot-scope (eso es lo que me estaba sucediendo).

La solución es actualizar Vue.js a ≥2.5 O usar "scope" en lugar de "slot-scope":

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

¡Espero que ayude a cualquiera a encontrar esto en Google como lo hice yo!

PD. Si está usando Vue.js ≤v2.4.x, recuerde que necesitará usar un elemento <template> ; no puede simplemente poner un límite de alcance de ranura en cualquier elemento misceláneo hasta ≥2.5 .X. Un pequeño ejemplo del mundo real:

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

La solución es actualizar Vue.js a ≥2.5 O usar "scope" en lugar de "slot-scope":

Todavía tengo este problema en 2.5.17 .

Es realmente molesto intentar construir abstracciones de componentes sin renderizado, ya que esto aparece con bastante frecuencia.