Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3

Vorwort:

Vue 3.0 fügt eine integrierte Komponente teleport , die hauptsächlich zur Lösung der folgenden Szenarien verwendet wird:

Manchmal gehört ein Teil der Vorlage einer Komponente logisch zu dieser Komponente, aber aus technischer Sicht wäre es besser, diesen Teil der Vorlage an eine andere Stelle im DOM außerhalb Vue app

Szenariobeispiel: Eine Button , die beim Klicken ein modales Dialogfeld öffnet

Der Speicherort der Geschäftslogik dieses modalen Dialogfelds gehört definitiv zu dieser Button , aber gemäß der DOM Struktur sollte sich der tatsächliche Speicherort des modalen Dialogfelds in der Mitte der gesamten Anwendung befinden.

Dies führt zu einem Problem: Der logische Speicherort der Komponente ist nicht derselbe wie DOM Speicherort.

Gemäß der bisherigen Vue2 Praxis wird das Dialogfeld normalerweise mithilfe von CSS-Eigenschaften wie position: fixed ; in der Mitte der Anwendung positioniert. Dies ist ein letzter Ausweg. Im Folgenden wird die grundlegende Verwendung von teleport gezeigt.

1. Teleport-Nutzung

Die Verwendung ist sehr einfach. Sie müssen nur das to-Attribut verwenden, um die Komponente an die gewünschte Position zu rendern.

// Zum Body-Tag rendern <teleport to="body">
  <div Klasse="modal">
    Ich bin ein teleportierter Modal! 
  </div>
</teleportieren>

Sie können auch Folgendes verwenden:

<teleportiere zu="#some-id" />
<teleportieren zu=".some-class" />
<teleportieren nach="[data-teleport]" />

Muss ein gültiger Abfrageselektor oder HTMLElement
sein HTMLElement


weiter

2. Vervollständigen Sie die modale Dialogkomponente

Lassen Sie uns nun ein standardmäßiges modales Dialogfeld kapseln

<Vorlage>
  <teleportieren zu="body">
    <Übergangsname="Dialog-Überblendung">
      <div Klasse="dialog-wrapper" v-show="sichtbar">
        <div Klasse="Dialog">
          <div Klasse="Dialog-Header">
            <slot name="Titel">
              <span class="dialog-title">
                {{ Titel }}
              </span>
            </slot>
          </div>
          <div Klasse="Dialog-Body">
            <Steckplatz></Steckplatz>
          </div>
          <div Klasse="dialog-footer">
            <slot name="Fußzeile">
              <button @click="onClose">Schließen</button>
            </slot>
          </div>
        </div>
      </div>
    </Übergang>
  </teleportieren>
</Vorlage>

<Skript>
importiere { defineComponent } von „vue“;

exportiere StandarddefiniereKomponente({
  Name: "tdialog"
});
</Skript>

<Skript-Setup>
const props = defineProps({
  Titel: String,
  sichtbar: Boolean
});

const emit = defineEmits(['schließen']);

const onClose = () => {
  emittieren('schließen');
};
</Skript>

Bei der Verwendung nur

<t-dialog title="LGD ist unbesiegbar" :visible="visible" @close="onClose"> Dies ist ein Inhalt, Xiaose Xianbei. </t-dialog>

// ...
const sichtbar = ref(false);

const onDialog = () => {
  sichtbarer.Wert = !sichtbarer.Wert;
};

const onClose = () => {
  sichtbarer Wert = falsch;
};

Einen Schritt weiter gehen

3. Komponenten-Rendering

Wir haben oben die standardmäßige modale Dialogkomponente fertiggestellt. Es gibt eine weitere ähnliche, leichtgewichtige Eingabeaufforderungskomponente namens Message , die nur eine kleine Menge Text anzeigen muss.

In den obigen Beispielen schreiben wir die TDialog Komponente immer dort, wo sie verwendet wird, aber für diese Messgae Komponente verwenden wir eine js-Anweisung, um sie aufzurufen, wenn wir sie auffordern möchten, ähnlich wie im Folgenden

// Rufen Sie eine Eingabeaufforderung auf Message({ message: 'Dies ist eine Nachricht' });

Wenn wir eine Funktion zum Aufrufen verwenden möchten, müssen wir diese Funktion vorbereiten. Die Funktion dieser Funktion besteht darin, das Rendern der Komponente abzuschließen.

const Nachricht = Optionen => {
  // Rendern des Containers vorbereiten const container = document.createElement('div');
  // Vnode generieren
  const vnode = createVNode(MessageConstructor, Optionen);
  // Renderrender(vnode, container);
};

Was ist MessageConstructor ? Dies ist unsere SFC (Single File Component):

<Vorlage>
  <teleportieren zu="#app">
    <Übergangsname="Nachricht-Ausblenden">
      <div v-show="sichtbar" ref="ins" class="message" :style="customStyle">{{ Nachricht }}</div>
    </Übergang>
  </teleportieren>
</Vorlage>

Online-Erlebnis

Code anzeigen

Zusammenfassen:

Oben geht es um die grundlegende und erweiterte Verwendung teleport Komponente, die uns viel Komfort bietet. Dies ist das Ende dieses Artikels zur detaillierten Verwendung der in Vue3 integrierten Komponente Teleport. Weitere relevante Inhalte zur Verwendung der in Vue3 integrierten Komponente Teleport finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!