Dynamisch wechseln von einem HTML -Element zum anderen in VUE

Kürzlich hat mich ein Freund gefragt, wie ich in einem Vue -Vorlagenblock ein HTML -Element dynamisch in ein anderes in ein anderes ändern kann. Zum Beispiel nach bestimmten Bedingungen<div> Element schalten auf<code><p> Element. Der Schlüssel ist, wie man dies macht, ohne sich auf eine Reihe von <code>v-if und v-else -Codes zu verlassen. Anfangs war es mir egal, weil ich keinen starken Grund dafür sehen konnte. Dies war nicht üblich. Später am selben Tag kontaktierte er mich jedoch erneut und erzählte mir, dass er gelernt hatte, wie man den Elementtyp verändert. Er wies aufgeregt darauf hin, dass Vue eine integrierte Komponente hat, die als dynamisches Element verwendet werden kann, genau das, was er braucht.

Diese kleine Funktion hält den Vorlagencode einfach und ordentlich. Es reduziert den redundanten Code von v-if und v-else und erleichtert den Code leichter zu verstehen und zu warten. Auf diese Weise können wir mithilfe von Methoden oder berechneten Eigenschaften gut geschriebene und komplexere Bedingungen in einem Skriptblock erstellen. Diese Dinge sollten in Skripte platziert werden, nicht in Vorlagenblöcken.

Der Hauptgrund, warum ich diesen Artikel geschrieben habe, ist, dass diese Funktion an vielen Stellen im Designsystem verwendet wird, für das wir arbeiten. Zugegeben, dies ist kein großes Merkmal und wird in der Dokumentation kaum erwähnt, zumindest soweit ich das beurteilen kann. Es kann jedoch dazu beitragen, bestimmte HTML -Elemente in Komponenten zu rendern.

Vue's eingebaut<component></component> Element

Es gibt mehrere Funktionen in Vue, die die Ansichten leicht dynamisch ändern können. Eines der Funktionen ist eingebaut<component></component> Element, mit dem Komponenten dynamisch wechseln können. Es gibt eine kurze Beschreibung der Verwendung dieses Elements mit einem HTML -Element in der Dokumentation von Vue 2 und Vue 3; Dies ist der Teil, den wir jetzt erkunden werden.

Das Konzept ist zu verwenden<component></component> Dieses Merkmal eines Elements ersetzt häufig verwendete HTML -Elemente, die von Natur aus ähnlich sind, aber unterschiedliche Funktionen, Semantik oder visuelle Effekte haben. Die folgenden grundlegenden Beispiele zeigen das Potenzial dieses Elements, um die VUE -Komponenten einfach und ordentlich zu halten.

Schaltfläche oder Link?

Schaltflächen und Links werden oft austauschbar verwendet, aber ihre Funktionen, Semantik und sogar visuelle variieren variieren stark. Im Allgemeinen die Schaltfläche (<button></button> ) wird für interne Operationen in der aktuellen Ansicht verwendet und an den JavaScript -Code gebunden. Auf der anderen Seite Link (<a></a> ) soll auf eine andere Ressource verweisen, unabhängig davon, ob es sich um eine Ressource auf dem Host -Server oder auf eine externe Ressource handelt. In den meisten Fällen handelt es sich um eine Webseite. Einseitige Anwendungen verlassen sich in der Regel mehr auf Schaltflächen als auf Links, aber beide werden benötigt.

Links sind oft visuell so konzipiert, dass sie wie die Schaltflächen aussehen, genau wie die Schaltflächen, die von Bootstraps .btn -Klasse erstellt wurden. In diesem Sinne können wir leicht eine Komponente erstellen, die zwischen diesen beiden Elementen entsprechend einer einzelnen Requisite wechselt. Standardmäßig ist die Komponente eine Schaltfläche, aber wenn https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 -Requisite angewendet wird, wird sie als Link rendern.

Dies ist in der Vorlage<component></component> :

<component :https: :is="element"><slot></slot></component>

Diese Bindungseigenschaft zeigt auf eine berechnete Eigenschaft mit dem Namen element , während die Bindung https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 -Eigenschaft verwendet die entsprechend benannte Eigenschaft verwendet https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 prop. Dies nutzt das normale Verhalten von Vues, ​​dh, wenn Prop keinen Wert hat, werden die gebundenen Eigenschaften nicht im gerenderten HTML -Element angezeigt. Unabhängig davon, ob es sich bei dem endgültigen Element um eine Taste oder ein Link handelt, bietet Slot interne Inhalt.

Die Berechnung der Eigenschaften ist einfach:

 Element () {
  Gibt this.https: //www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 zurück? 'a': 'Button';
}

Wenn es https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 -Prop gibt, dann die Anwendung<a></a> Element; Ansonsten bekommen wir einen<button></button> .

<my-button> Dies ist ein Knopf</my-button>
<my-button https:> Dies ist ein Link</my-button>

HTML wird wie folgt dargestellt:

 <button>Dies ist ein Knopf</button>
<a https:>Dies ist ein Link</a>

In diesem Fall könnte man erwarten, dass die beiden Elemente visuell ähnlich sind, aber sie unterscheiden sich offensichtlich für semantische und zugängliche Bedürfnisse. Das heißt, die Elemente der beiden Ausgänge müssen nicht den gleichen Stil haben. Sie können ein Element mit dem Selector div.my-button in einem Stilblock verwenden oder eine dynamische Klasse erstellen, die sich je nach Element ändert.

Das Gesamtziel ist es, Dinge zu vereinfachen, indem eine Komponente nach Bedarf als zwei verschiedene HTML-Elemente rendern kann-kein v-if oder v-else !

Bestellte oder ungeordnete Liste?

Ähnlich wie beim obigen Schaltfläche können wir eine Komponente erstellen, die verschiedene Listenelemente ausgibt. Da sowohl ungeordnete als auch bestellte Listen das gleiche Listenelement verwenden (Element<li> ) Element als untergeordnete Elemente, daher ist dies leicht zu implementieren. Wir müssen nur austauschen<ul></ul> Und<ol></ol> . Auch wenn wir die Beschreibungsliste verwenden möchten<dl></dl> Dies ist auch einfach zu implementieren, da der Inhalt nur eine akzeptable ist<dt></dt> /<dd></dd> Kombinierter Slot. Der Vorlagencode ist dem Button -Beispiel sehr ähnlich:

<component :is="element"><slot> Keine Listenelemente!</slot></component>

Bitte beachten Sie den Standardinhalt im Slot -Element, über den ich später sprechen werde.

Es gibt eine Requisite, die den zu verwendenden Listentyp angibt, der zu ul definiert ist:

 Requisiten: {
  ListType: {
    Typ: String,
    Standard: 'ul' '
  }
}

In ähnlicher Weise gibt es eine berechnete Eigenschaft namens element :

 Element () {
  if (this. $ slots.default) {
    zurück this.listType;
  } anders {
    zurück 'div';
  }
}

In diesem Fall testen wir, ob der Standard -Slot existiert, was bedeutet, dass er Inhalte zum Rendern hat. Wenn Sie vorhanden sind, verwenden Sie den Listentyp, der über listType Prop übergeben wurde. Andernfalls wird das Element<div> Damit werden die "No -List -Elemente!" angezeigt. Nachricht im Slot -Element. Wenn es kein Listenelement gibt, wird die HTML nicht als Liste mit nur einem Element ohne Elemente angegeben. Es liegt jedoch an Ihnen, aber es ist schön, die Semantik einer Liste ohne offensichtlich gültige Artikel zu berücksichtigen. Eine andere Sache ist zu berücksichtigen, dass die Hilfswerkzeuge verwirrt werden können, wenn man der Ansicht ist, dass dies eine Liste mit nur einer Projekterklärung ohne Projekte ist. Genau wie im obigen Button -Beispiel können Sie auch jede Liste in verschiedenen Stilen stylen. Dies kann Elemente mit dem Klassennamen <code>ul.my-list basierend auf dem Selektor lokalisieren. Eine andere Option besteht darin, den Klassennamen basierend auf dem ausgewählten Element dynamisch zu ändern.

Dieses Beispiel folgt einer BEM-ähnlichen Klassennamenstruktur:

<component :class="`my-list ${element}`" :is="element"><slot> Keine Listenelemente!</slot></component>

Die Verwendung ist so einfach wie das vorherige Button -Beispiel:

<my-list><li> Listen Sie Punkt 1</li></my-list>
<my-list list-type="ol"><li>Listen Sie Punkt 1</li></my-list>
<my-list list-type="dl"><dt>Punkt 1</dt>
<dd> Dies ist Artikel eins.</dd></my-list>
<my-list></my-list>

Jede Instanz macht das angegebene Listenelement. Die letzte Instanz wird jedoch a erzeugen

, erklären Sie, dass es keinen Listenelement gibt, denn nun, es gibt keine Liste, die angezeigt werden muss! Man könnte sich fragen, warum Sie eine Komponente erstellen möchten, die zwischen verschiedenen Listentypen wechselt, wenn es sich nur um einfaches HTML handelt. Während es aus vielen Gründen viele Vorteile gibt, die aus Gründen der Styling- und Wartbarkeitsgründe eine Liste in eine Komponente enthalten, können andere Gründe berücksichtigt werden. Was ist beispielsweise, wenn eine Form der Funktionalität an einen anderen Listentyp gebunden ist? Vielleicht überlegen Sie, die Liste zu sortieren und zu wechseln auf<ol></ol> Um die Sortierreihenfolge anzuzeigen und dann zurückzuschalten, wenn sie fertig sind?

Jetzt kontrollieren wir die Elemente

Auch wenn diese beiden Beispiele im Wesentlichen die Wurzelelementkomponente ändern, sollten Sie in Betracht ziehen, tiefer in die Komponente zu gehen. Zum Beispiel muss der Titel möglicherweise auf bestimmten Bedingungen aus basieren<h1></h1> Wechseln zu<h3></h3> .

---

Wenn Sie ternäre Operatoren verwenden müssen, um zu kontrollieren, was mehr als ein paar Eigenschaften sind, empfehle ich, mich an v-if zu halten. Das Schreiben von mehr Code für Eigenschaften, Klassen und Eigenschaften macht den Code nur komplexer als v-if . In diesen Fällen wird v-if den Code auf lange Sicht einfacher, während einfacherer Code einfacher zu lesen und zu warten ist.

Betrachten Sie beim Erstellen von Komponenten einen einfachen v-if zwischen den Elementen wechselt, diesen kleinen Aspekt der Hauptfunktionalität von VUE.

Erweiterte Ideen, flexibles Kartensystem

Betrachten Sie alles, was wir bisher abgedeckt haben, und wenden Sie es auf eine flexible Kartenkomponente an. In diesem Beispiel für Kartenkomponenten können drei verschiedene Kartenarten in einen bestimmten Teil des Artikellayouts platziert werden:

<li> Heldenkarte: Es wird erwartet, dass dies oben auf der Seite verwendet wird und auffälliger als andere Karten. <li> Call to Action Card: Wird als eine Reihe von Benutzeraktionen vor oder innerhalb des Artikels verwendet. <li> Informationskarte: Wird für Auszüge verwendet.

Stellen Sie sich diese als folgt dem Entwurfssystem vor, und die Komponenten steuern HTML für Semantik und Styling.

Im obigen Beispiel sehen Sie die Heldenkarte an der Spitze, gefolgt von einer Reihe von Angaben zu Actionkarten und dann - ein wenig nach unten - Sie werden die Message -Karte rechts sehen.

Hier ist der Vorlagencode für die Kartenkomponente:

<component :class="`card ${type}`" :is="elements('root')">
  <component :style="bg()" :is="elements('header')">
    <slot name="header"></slot>
  </component>
  <div>
    <slot name="content"></slot>
  </div>
  <component :is="elements('footer')">
    <slot name="footer"></slot>
  </component>
</component>

In der Karte sind drei "Komponenten" -Elemente enthalten. Jedes Element repräsentiert ein bestimmtes Element in der Karte, ändert sich jedoch entsprechend dem Kartentyp. Jede Komponente ruft elements() mit einem Parameter auf, der angibt, welchen Teil der Anrufkarte.

elements() lautet:

 Elemente (was) {
  const tags = {
    Held: {Root: 'Abschnitt', Header: 'H1', Fußzeile: 'Date'},
    CTA: {root: 'Abschnitt', Header: 'H2', Fußzeile: 'div'},
    info: {root: 'beiseite', Header: 'H3', Fußzeile: 'klein'}
  }
  return tags [this.type] [was];
}

Es kann viele Möglichkeiten geben, damit umzugehen, aber Sie müssen sich in eine Richtung bewegen, die Ihren Komponentenbedürfnissen entspricht. In diesem Fall gibt es ein Objekt, das die HTML -Element -Tags für jeden Teil jedes Kartentyps verfolgt. Die Methode gibt dann das erforderliche HTML -Element basierend auf dem aktuellen Kartentyp und den in übergebenen Parametern zurück.

Für Stile habe ich eine Klasse auf das Stammelement der Karte eingefügt, die auf dem Typ der Karte basiert. Dies erleichtert es sehr einfach, jeden CSS nach Bedarf zu erstellen. Sie können auch CSS basierend auf dem HTML -Element selbst erstellen, aber ich bevorzuge Klassen. Zukünftige Änderungen an Kartenkomponenten können die HTML -Struktur ändern und es ist unwahrscheinlich, dass die Logik der Erstellung der Klasse geändert wird.

Die Karte unterstützt auch Hintergrundbilder auf dem Titel der Heldenkarte. Dies geschieht durch die Platte eines einfachen berechneten Attributs bg für das Titelelement. Hier ist das berechnete Attribut:

 bg () {
  diesen.background zurückgeben? `Hintergrund-Image: URL ($ {this.background})`: null;
}

Wenn die Bild -URL in background -Requisite bereitgestellt wird, gibt die berechnete Eigenschaft eine Zeichenfolge für Inline -Stile zurück, die das Bild als Hintergrundbild anwenden. Eine ziemlich einfache Lösung, die es leicht leistungsfähiger machen kann. Beispielsweise kann es benutzerdefinierte Farben, Gradienten oder Standardfarben unterstützen (falls kein Bild bereitgestellt wird). Dieses Beispiel beinhaltet nicht viele Möglichkeiten, da jeder Kartentyp eine eigene optionale Requisitin für Entwickler hat, die sie nutzen können.

Hier ist die Heldenkarte in dieser Demo:

<custom-card background="https://picsum.photos/id/237/800/200" type="hero">
  <template v-slot:header>Artikel Titel</template>
  <template v-slot:content>Lorem ipsum ...</template>
  <template v-slot:footer>1. Januar 2011</template>
</custom-card>

Sie werden sehen, dass jeder Abschnitt der Karte seinen eigenen Inhaltsfenster hat. Und der Einfachheit halber ist Text das einzige, was im Slot erwartet wird. Die Kartenkomponente verarbeitet die erforderlichen HTML -Elemente gemäß dem Kartentyp. Das Erstellen von Komponenten erwarten nur Text, wenn die Verwendung von Komponenten die Verwendung von Komponenten recht einfach macht. Es ersetzt die Notwendigkeit, Entscheidungen über die HTML -Struktur zu treffen und so die Implementierung von Karten zu vereinfachen.

Zum Vergleich finden Sie hier zwei weitere Typen, die in der Demo verwendet werden:

<custom-card type="cta">
  <template v-slot:header>CTA Titel eins</template>
  <template v-slot:content>Lorem Ipsum Dolor Sit Amet, Konsistende Apiscing Elit.</template>
  <template v-slot:footer>Fußzeile</template>
</custom-card>
<custom-card type="info">
  <template v-slot:header>Hier ist ein Zitat</template>
  <template v-slot:content>"Maecenas ... Quis."</template>
  <template v-slot:footer>Wer hat es gesagt</template>
</custom-card>

Beachten Sie erneut, dass jeder Slot nur einen Text erwartet, da jeder Kartentyp ein eigenes HTML -Element entsprechend der Definition elements() -Methode generiert. Wenn Sie in Zukunft der Meinung sind, dass verschiedene HTML -Elemente verwendet werden sollten, müssen Sie nur die Komponente aktualisieren. Das Erstellen von Merkmalen für Zugänglichkeit ist ein weiteres potenzielles zukünftiges Update. Interaktionsfunktionalität kann sogar basierend auf dem Kartyp erweitert werden.

Die Leistung von Komponenten in Komponenten

Seltsam in Vue -Komponente benannt<component></component> Elemente wurden ursprünglich für eine Sache entwickelt, aber wie oft hat es einen kleinen Nebeneffekt, der es auf andere Weise sehr nützlich macht.<component></component> Elemente sind so konzipiert, dass die VUE -Komponenten dynamisch in einer anderen Komponente nach Bedarf wechseln. Eine grundlegende Idee dazu könnte ein Registerkartensystem zum Umschalten zwischen Komponenten sein, die als Seiten fungieren. Dies wird tatsächlich in der Vue -Dokumentation erklärt. Aber es unterstützt das Gleiche für HTML -Elemente.

Hier ist ein neues technologisches Beispiel, das von einem Freund geteilt wird, was zu einem erstaunlich nützlichen Tool in der von mir verwendeten VUe -Funktion geworden ist. Ich hoffe, dieser Beitrag wird Ihnen Ideen und Informationen zu dieser kleinen Funktion weitergeben und können Sie untersuchen, wie Sie ihn in Ihrem eigenen Vue -Projekt nutzen können.