Vue: Scoped Slot warnt, wenn es innerhalb einer dynamischen Komponente für ein reguläres Element verwendet wird

Erstellt am 13. Juni 2019  ·  4Kommentare  ·  Quelle: vuejs/vue

Ausführung

2.6.10

Reproduktionslink

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

Schritte zum Reproduzieren

Wenn ich zum Hinzufügen einer Komponente DOM Template Parsing Caveats verwende (z. B. <tr is="custom-row"> ), kann ich keine Slots mit Gültigkeitsbereich (slotProps) verwenden, ohne eine Warnung in der Konsole zu erhalten. Ich möchte es so verwenden:

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

Was wird erwartet?

Keine Warnung.

Was passiert eigentlich?

Ich erhalte die folgende Warnung in der Konsole.

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

Der Rest sieht so aus, als würde es wie erwartet funktionieren.

bug contribution welcome good first issue has PR warnings

Hilfreichster Kommentar

Ich habe meinen Kommentar aktualisiert, aber die Warnung scheint trotzdem zu erscheinen. Die Warnung sollte in der Tat nicht erscheinen

Alle 4 Kommentare

Wie in der Warnung angegeben, kann v-slot nur für die Wrapper-Komponenten verwendet oder in der Komponente selbst verschachtelt werden, jedoch für ein template -Tag.
Früher erlaubte slot-scope diese Verwendung, aber sie wurde entfernt. Sie können den RFC überprüfen: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot- syntax.md.

Wenn Sie nur einen Steckplatz mit Gültigkeitsbereich haben, sollten Sie dies tun können

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

Hallo @posva , vielen Dank für deinen Kommentar!

Wie vorgeschlagen, habe ich auch versucht, v-slot die in einem template -Tag verschachtelt sind.

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

Dies führt jedoch auch zu einer Warnung, siehe Geige:
https://jsfiddle.net/mybeta/bhcoLwu3/

Wenn Sie die Einschränkungen beim Parsen von DOM-Vorlagen vermeiden, funktioniert dies einwandfrei:

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

Aber ich glaube, ich muss die Einschränkung verwenden, wenn ich die Komponente auf einem tr -Tag verwende.

Würde es Ihnen auch etwas ausmachen, diesen Kommentar etwas näher zu erläutern?

Wenn Sie nur einen Slot mit Gültigkeitsbereich haben, sollten Sie in der Lage sein, `

Vielen Dank!

Ich habe meinen Kommentar aktualisiert, aber die Warnung scheint trotzdem zu erscheinen. Die Warnung sollte in der Tat nicht erscheinen

Wie ist der Status davon?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen