Vue: La ranura con alcance advierte cuando se usa dentro de un componente dinámico en un elemento regular

Creado en 13 jun. 2019  ·  4Comentarios  ·  Fuente: vuejs/vue

Versión

2.6.10

Enlace de reproducción

https://jsfiddle.net/mybeta/1dfwsazn/

pasos para reproducir

Cuando utilizo las advertencias de análisis de plantillas DOM para agregar un componente (por ejemplo, <tr is="custom-row"> ), no puedo usar ranuras con alcance (slotProps) sin recibir una advertencia en la consola. Me gustaría usarlo de esta manera:

<tr is="custom-row" v-slot="slotProps">
    slotProps: {{slotProps.test}}
</tr>

¿Lo que es esperado?

Sin advertencia.

¿Qué está pasando realmente?

Recibo la siguiente advertencia en la consola.

[Vue warn]: Error compiling template:
v-slot can only be used on components or <template>.

El resto parece que funciona como se esperaba.

bug contribution welcome good first issue has PR warnings

Comentario más útil

Actualicé mi comentario, pero la advertencia parece aparecer de todos modos, la advertencia no debería aparecer de hecho

Todos 4 comentarios

Como dice la advertencia, v-slot solo se puede usar en los componentes de envoltura o anidar en el propio componente, pero en una etiqueta template .
Anteriormente, slot-scope permitiría este uso, pero se eliminó, puede consultar el RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot- syntax.md.

Si solo tiene una ranura con alcance, debería poder hacer

<tr :is="customComp" v-slot="data"></tr>

Hola @posva , ¡muchas gracias por tu comentario!

Como se sugirió, también intenté usar v-slot anidado dentro de una etiqueta template , algo como lo siguiente.

<div is="test-component">
  <template v-slot:default="slotProps">
    slotProps: {{slotProps.test}}
  </template>
</div>

Sin embargo, eso también produce una advertencia, vea violín:
https://jsfiddle.net/mybeta/bhcoLwu3/

Al evitar las advertencias de análisis de la plantilla DOM, funciona bien:

<test-component>
  <template v-slot:default="slotProps">
    slotProps: {{slotProps.test}}
  </template>
</test-component>

pero creo que necesito usar la advertencia, cuando uso el componente en una etiqueta tr .

Además, ¿te importaría explicar un poco más este comentario?

Si solo tiene una ranura con alcance, debería poder hacer `

¡Gracias!

Actualicé mi comentario, pero la advertencia parece aparecer de todos modos, la advertencia no debería aparecer de hecho

¿Cuál es el estado de esto?

¿Fue útil esta página
0 / 5 - 0 calificaciones