Wie kann man Komponenten von Drittanbietern elegant in Vue kapseln? Einführung in Verpackungsmethoden

Wie kapsele ich Komponenten von Drittanbietern elegant in Vue? Der folgende Artikel wird anhand von Beispielen Möglichkeiten erkunden, Komponenten von Drittanbietern eleganter in Vue zu kapseln. Ich hoffe, er ist für alle hilfreich!

1. Beschreibung der Bedarfsszenarien

Während der tatsächlichen Entwicklung, um die Neuerfindung des Rades zu reduzieren, die Arbeitseffizienz zu verbessern und Entwicklungszeit und -kosten zu sparen, Es ist unvermeidlich, UI-Komponentenbibliotheken wie element-ui zu verwenden, das in Web-Frontends sehr beliebt ist. Manchmal müssen wir jedoch einige Änderungen an der Originalkomponente vornehmen, beispielsweise an einer Bildkomponente. Wir müssen das spezifische Bild vereinheitlichen, das angezeigt wird, wenn das Laden des Bildes fehlschlägt, und es jedes Mal hinzufügen, wenn die Komponente verwendet wird. Es ist mühsam und zeitaufwändig. Der Schlüssel liegt in den hohen Wartungskosten. Wenn Sie das Bild aktualisieren müssen, das falsch geladen wurde. Sie müssen die Orte, an denen diese Komponente verwendet wird, erneut finden und ändern. (Lernvideo-Sharing: vuejs-Tutorial)

Ein weiteres Beispiel sind benutzerdefinierte Paging-Komponenten, die ebenfalls sehr verbreitet sind. Der Stil der Komponente, die Anzahl der standardmäßig unterstützten Seiten pro Seite, Kapselung und Wiederverwendung sind im Hinblick auf Wartbarkeit und Entwicklungseffizienz von Vorteil.

Es ist jedoch nicht notwendig, eine Paging-Komponente von Grund auf zu schreiben, sondern sie einfach auf der Originalbasis zu kapseln. Wie kann man also die Komponenten einer Komponentenbibliothek eines Drittanbieters schnell und elegant kapseln? v-bind="$attrs" und v-on="$listeners" ="$listeners" wird uns Überraschungen bringen. Sie können dafür sorgen, dass die gekapselte Komponente fast alle V-Bind-Eigenschaften und V-On-Ereignisse der Originalkomponente „erbt“, und ihre Verwendung und Funktion sind dieselben wie in der Originalkomponente.

Kapseln Sie el-image als benutzerdefinierte Bildkomponente und verwenden Sie benutzerdefiniertes Bild, um Bilder überall anzuzeigen. Während des Bildladevorgangs wird die Aufforderung „Laden…“ einheitlich angezeigt, und wenn ein Ladefehler auftritt, wird ein einheitliches Standardbild angezeigt. Im Folgenden werden der Ladevorgang für benutzerdefinierte Bildkomponenten und die Auswirkungen von Ladefehlern beschrieben.

2. Einführung in wichtige technische Punkte

1.v-bind="$attrs"

Die wunderbare Verwendung von v-bind="$attrs" besteht darin, Komponenten auf höherer Ebene zu erstellen und Dritte zu kapseln Parteien Komponente,

kann die im übergeordneten Bereich verwendeten V-Bind-Attribute automatisch binden,

und sie mithilfe von v-bind="$attrs" an die gekapselte Komponente weitergeben.

Ein Einleitungsauszug aus der offiziellen Vue-Website

enthält Attribute

Bindungen (außer Klasse und Stil), die im übergeordneten Bereich nicht als Requisiten erkannt (und abgerufen) werden. Wenn eine Komponente keine Requisiten deklariert, werden

alle übergeordneten Bereichsbindungen (außer Klasse und Stil) hier einbezogen,

und interne Komponenten können über v-bind="$attrs" übergeben werden – beim Erstellen hoher Werte. Sehr nützlich für Level-Komponenten.

Zum Beispiel, nachdem wir v-bind="$attrs" für unsere gekapselte benutzerdefinierte Image-Komponente verwendet haben, Wir haben auch fast alle Eigenschaften von el-image in der Komponente „custom-Image“. Und seine Wirkung und Verwendung sind die gleichen wie bei der Verwendung von el-image. Mit anderen Worten: Wir können „custom-Image“ verwenden, indem wir uns den Artikel von el-image ansehen.

2.v-on="$listeners"

v-on="$Zuhörer“ mit v-bind= "$attrs" ist ähnlich, Es kann den Zeit-Listener im übergeordneten Bereich mithilfe von v-on an den Zeit-Listener mithilfe von v-on="$listeners"-Komponente und v-bind ="$attrs " haben ähnliche Funktionen, außer dass ein Attribut ein Ereignis ist. Oder nehmen Sie die benutzerdefinierte Image-Komponente als Beispiel. Zu diesem Zeitpunkt verfügt die benutzerdefinierte Image-Komponente über fast alle Ereignisse der el-image-Komponente. Und seine Wirkung und Verwendung sind die gleichen wie bei der Verwendung von el-image.

Enthält v-on-Ereignis-Listener im übergeordneten Bereich (ohne .native-Modifikator).

Es kann über v-on="$listeners" an interne Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

Eine Einführung von der offiziellen Vue-Website

3. Codebeispiele für die Kapselung von el-image

Beispiele für die Verwendung von benutzerdefinierten Image-Komponenten

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

Beispiele für die Kapselung von el-Image als benutzerdefinierte Image-Komponenten

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img src="/static/imghw/default1.png"  data-src="require(&#39;image-f/icon-empty-img.png&#39;)"  class="lazy"  : alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

(Lernen Video-Sharing: Web-Frontend-Entwicklung, Einführung in die Programmierung)

Das obige ist der detaillierte Inhalt vonWie kann man Komponenten von Drittanbietern elegant in Vue kapseln? Einführung in Verpackungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!