Vue: Scoped Slot avertit lorsqu'il est utilisé à l'intérieur d'un composant dynamique sur un élément régulier

Créé le 13 juin 2019  ·  4Commentaires  ·  Source: vuejs/vue

Version

2.6.10

Lien de reproduction

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

Étapes à suivre pour reproduire

Lorsque j'utilise des avertissements d'analyse de modèle DOM pour ajouter un composant (par exemple <tr is="custom-row"> ), je ne peux pas utiliser les emplacements à portée (slotProps) sans recevoir un avertissement dans la console. Je voudrais l'utiliser de cette façon:

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

Qu'attend-on?

Pas d'avertissement.

Que se passe-t-il réellement?

J'obtiens l'avertissement suivant dans la console.

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

Le reste semble fonctionner comme prévu.

bug contribution welcome good first issue has PR warnings

Commentaire le plus utile

J'ai mis à jour mon commentaire mais l'avertissement semble apparaître quand même, l'avertissement ne devrait pas apparaître en effet

Tous les 4 commentaires

Comme le dit l'avertissement, v-slot ne peut être utilisé que sur les composants wrapper ou imbriqué dans le composant lui-même mais sur une balise template .
Auparavant, slot-scope permettait cette utilisation mais elle a été supprimée, vous pouvez consulter la RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot- syntax.md.

Si vous n'avez qu'un seul emplacement, vous devriez pouvoir faire

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

Salut @posva , merci beaucoup pour ton commentaire!

Comme suggéré, j'ai également essayé d'utiliser v-slot imbriqué dans une balise template , quelque chose comme ci-dessous.

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

Cependant, cela produit également un avertissement, voir violon:
https://jsfiddle.net/mybeta/bhcoLwu3/

Lorsque vous évitez les mises en garde d'analyse du modèle DOM, cela fonctionne très bien:

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

mais je crois que je dois utiliser la mise en garde, lors de l'utilisation du composant sur une balise tr .

Aussi, pourriez-vous expliquer un peu plus ce commentaire?

Si vous n'avez qu'un seul emplacement à portée, vous devriez pouvoir faire `

Merci!

J'ai mis à jour mon commentaire mais l'avertissement semble apparaître quand même, l'avertissement ne devrait pas apparaître en effet

Quel est le statut de cela?

Cette page vous a été utile?
0 / 5 - 0 notes