So erstellen Sie eine benutzerdefinierte globale Komponente mit Vue

Ich habe in den letzten zwei Tagen Vue.js gelernt und bin der Meinung, dass es viele Wissenspunkte zu Komponenten gibt und diese sehr wichtig sind. Daher stellt Ihnen dieser Artikel hauptsächlich die Implementierungsmethode benutzerdefinierter globaler Komponenten in Vue vor. Es wird durch Beispielcode eingeführt und bietet einen gewissen Referenz-Lernwert, damit jeder es lernen oder verwenden kann. Freunde, die es benötigen, können dem Editor folgen, um gemeinsam zu lernen.

Vorwort

Manchmal möchten wir bei der Entwicklung ein Plug-In schreiben und dann unser eigenes Plug-In verwenden Es gibt ein starkes Erfolgserlebnis. Heute habe ich ein Problem gelöst, das mich schon lange beschäftigt. Ich werde es jetzt zum späteren Nachschlagen aufzeichnen.

Der Wissenspunkt ist die Verwendung von Plug-Ins im offiziellen Website-Tutorial von Vue.js

Die Methode ist wie folgt:

Zuallererst bin ich auf das Problem gestoßen: Wenn meine benutzerdefinierte Komponente mehrmals in anderen Komponenten im Projekt aufgerufen werden muss, besteht meine bisherige Lösung einfach darin, sie dort zu referenzieren, wo sie benötigt wird. Dies führt zweifellos zu einer Menge Codeduplizierung.

Bei der Verwendung einiger UI-Frameworks von Vue.js ist mir aufgefallen, dass Sie nur das Plug-In in die Eintragsdatei des Projekts importieren und dann Vue.use('Plugin-Name') folgen müssen. Auf diese Weise können die Komponenten und Methoden dieses Frameworks im gesamten Projekt verwendet werden.

Nachdem ich die Informationen konsultiert hatte, stellte ich fest, dass die benutzerdefinierte Komponente eine Installationsmethode bereitstellen muss

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

Stellen Sie die Komponente vor, die Sie so geschrieben haben, erstellen Sie dann ein Objekt, fügen Sie eine Installationsmethode ein und verwenden Sie sie Vue.component()Die Methode wird als globale Vue-Komponente registriert und schließlich exportiert der Standardexport dieses Objekt.

Da nun der kritischste Schritt abgeschlossen ist, ist der nächste Schritt der kritischste Schritt.

Wir müssen die gerade erstellte Komponente in die Eintragsdatei des Projekts einfügen und das Plug-In über Vue.use (eingeführte Komponente) verwenden.

Zu diesem Zeitpunkt ist eine globale Vue-Komponente fertig. Während wir die Installationsmethode bereitstellen, können wir die Methoden in der Komponente auch über die Methode Vue.$emit() auslösen. Bei der Verwendung von Element UI haben wir jedoch kürzlich festgestellt, dass die Methoden in ihren Komponenten im Allgemeinen über Vue.$refs() ausgelöst werden. Die konkreten Gründe bleiben künftiger Forschung überlassen.

Grundlegende Verwendung von vue $refs

<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Um DOM-Elemente zu erhalten, benötigen Sie im Allgemeinen document.querySelector ("".input1") Dieser Dom-Knoten erhält dann den Wert von input1.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr erhalten. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript so: this.$refs.input1 Dadurch wird der Verbrauch beim Abrufen von Dom-Knoten reduziert.

Das Obige habe ich für alle zusammengestellt an alle in der Zukunft.

Verwandte Artikel:

Axios zum Hochladen von Dateien in Vue verwenden

So erstellen Sie mit gulp einen vollständigen Projektprozess

So fügen Sie einem Objekt in js ein Array hinzu

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine benutzerdefinierte globale Komponente mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!