Vue: Feature: Fallback-Inhalt für Teiltöne

Erstellt am 11. Apr. 2016  ·  3Kommentare  ·  Quelle: vuejs/vue

Partials sollten Fallback-Inhalte unterstützen – genau wie Slots. Dies würde die Lesbarkeit von Vorlagen bei einer bestimmten Verwendung erheblich verbessern:
Es gibt eine Basiskomponente mit einer gewissen Logik (zB ein Dialog), von der andere Komponenten (zB ein PromptDialog) abgeleitet werden müssen, die dieselbe Logik und (äußere) Vorlage haben. Dies wird durch die Verwendung von Partials erreicht, die ähnlich wie Slots verwendet werden - aber auf Komponentenbasis und nicht mit Instanzen.
Eine solche Vorlage würde wie folgt aussehen:

<div>
  <div class="header">
    <partial name="header">
      <i class="fa-whatever"></i>
      {{title}}
    </partial>
  </div>
  <div class="body">
    <partial name="body">
      {{{body}}}
    </partial>
  </div>
  <div class="footer">
    <partial name="footer">
      <!-- some stuff for button rendering -->
    </partial>
  </div>
</div>

Ohne diese Funktion muss ich den Inhalt aller Teilknoten außerhalb der Vorlage platzieren - und es wird mit verschachtelten Teilknoten noch schlimmer.
An die Probleme herangehen, indem man die Basiskomponente in der Vorlage der abgeleiteten verwendet - also verschachtelte Instanzen zu haben, ist nicht praktikabel, da ich die Mehrheit der Daten/Requisiten und API vom äußeren (pseudo-abgeleiteten) zum inneren umleiten müsste (Basis-)Instanz.

Hilfreichster Kommentar

Ich würde sagen, das ist Missbrauch von Partials. Dies ist keine gute Idee, da Ihre Teilausschnitte vom übergeordneten Element stammen, während Sie sich des Datenkontexts des untergeordneten Elements bewusst sind. Das ist eine enge Entkopplung.

Die Dialogkomponente sollte keinen eigenen Status haben, da sie rein präsentationsorientiert ist. Geben Sie den Zustand nicht weiter. Sowohl der Status als auch der angezeigte Inhalt sollten zu der übergeordneten Komponente gehören, die den Dialog verwendet.

Alle 3 Kommentare

Tut mir leid, ich habe nicht verstanden, warum die Verwendung eines Slots anstelle eines Teils keine Option ist :sweat_smile:
Gibt es dafür einen Grund?

Bei der Verwendung von Slots hätte ein pseudo-abgeleiteter _PromptDialog_ die folgende Vorlage.

<dialog
  :foo.sync="foo"
  >
  <input
    v-model="thePromptedValue"
    slot="body"
    >
</dialog>

Für jedes Attribut _foo_ auf der ursprünglichen _Dialog_-Komponente müsste ich dasselbe Attribut auf dem äußeren _PromptDialog_ haben und es an das innere weitergeben. Das gleiche gilt für alle Methoden, die auf _Dialog_ definiert sind: Ich muss Proxys definieren, die den Aufruf an das Inner weitergeben. Dies ist lästig und vereitelt die Idee hinter der Komponentenerweiterung/Klassenvererbung.

Ich würde sagen, das ist Missbrauch von Partials. Dies ist keine gute Idee, da Ihre Teilausschnitte vom übergeordneten Element stammen, während Sie sich des Datenkontexts des untergeordneten Elements bewusst sind. Das ist eine enge Entkopplung.

Die Dialogkomponente sollte keinen eigenen Status haben, da sie rein präsentationsorientiert ist. Geben Sie den Zustand nicht weiter. Sowohl der Status als auch der angezeigte Inhalt sollten zu der übergeordneten Komponente gehören, die den Dialog verwendet.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen