Vue: Das Übergeben der Komponente an den verschachtelten benannten Slot von Enkelkindern wird im Standard-Slot aufgelöst.

Ausführung

2.5.2

Reproduktionslink

https://jsfiddle.net/daxchen/k75y6tu0/

Schritte zum Reproduzieren

Mein Anwendungsfall ist, dass ich ein Standardlayout mit Symbolleiste und Hauptinhalts-Wrapper habe. Einige Seiten benötigen jedoch ein SearchBar andere nicht, und Layouts können unterschiedliche Ebenen haben.

Also habe ich eine Komponente namens LayoutDefault als Basis für andere Layouts erstellt. Und weil ich in der Lage sein möchte, die Standardsymbolleiste bei Bedarf zu ersetzen, habe ich die Standardsymbolleiste in <slot name="toolbar"> mit Toolbar als Fallback-Inhalt eingefügt.

Code-Auszug:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

Ich mache diese Art von Komponenten, weil ich in der Lage sein möchte:

1. Ersetzen Sie bei Bedarf die Standardsymbolleiste.
2. Verwenden Sie die Standardsymbolleiste, aber übergeben Sie die Dinge an den Steckplatz ( "toolbarSlot" im obigen Beispiel).

Und dann mache ich in anderen Layoutkomponenten Folgendes:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

Wie Sie sehen können, habe ich dieses Muster verwendet, um Komponenten an die Slots des Enkels zu übergeben: <slot name="foo" slot="foo"> .

Aus irgendeinem Grund werden Komponenten, die mit diesem Muster übergeben wurden, an den Standardsteckplatz übergeben, falls vorhanden.

Siehe Beispiele 2, 3 und 4 in der Reproduktion.

Was wird erwartet?

Ich gehe davon aus, dass, wenn nichts an einen benannten Slot übergeben wird, der Fallback-Inhalt mit seinen Slots gerendert wird.

Was passiert eigentlich?

In Beispiel 2 wird das ersetzte Toolbar im Standard-Slot von LayoutDefault gerendert.

In Beispiel 3 und 4 wird SearchBar an slot="toolbarSlot" , aber nicht gerendert.

Ist das das erwartete Verhalten?
Oder ob es für mich eine Möglichkeit gibt, diese Art von wiederverwendbaren Layouts mit jedem austauschbaren Standardteil austauschbar zu machen und bei Verwendung der Standardteile Komponenten in ihre (Standardteil-) Steckplätze zu übergeben?