Beispiel-Tutorial zur Verwendung und Entwicklung von Vue.js-Komponenten

Komponenten

Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf hoher Ebene sind Komponenten benutzerdefinierte Elemente, und der Compiler von vue.js fügt ihm in einigen Fällen spezielle Funktionen hinzu auch in Form von nativen HTML-Elementen vorliegen, erweitert um das Attribut is.

Vue.js-Komponenten können als ViewModel-Klassen mit vordefinierten Verhaltensweisen verstanden werden. Eine Komponente kann viele Optionen vordefinieren, die wichtigsten sind jedoch die folgenden:

Vorlage (Vorlage): Die Vorlage deklariert die Zuordnungsbeziehung zwischen den Daten und dem DOM, die letztendlich dem Benutzer angezeigt wird.

Anfangsdaten (Daten): der anfängliche Datenzustand einer Komponente. Bei wiederverwendbaren Komponenten ist dies normalerweise der private Status.

Externe Parameter (Requisiten) akzeptiert: Daten werden über Parameter übertragen und zwischen Komponenten geteilt. Parameter sind standardmäßig unidirektional (von oben nach unten) gebunden, können aber auch explizit bidirektional deklariert werden.

Methoden: Änderungsvorgänge an Daten werden im Allgemeinen innerhalb der Methoden von Komponenten durchgeführt. Benutzereingabeereignisse und Komponentenmethoden können über die v-on-Direktive gebunden werden.

Lebenszyklus-Hooks: Eine Komponente löst mehrere Lifecycle-Hook-Funktionen aus, z. B. erstellt, angehängt, zerstört usw. In diesen Hook-Funktionen können wir eine benutzerdefinierte Logik einkapseln. Im Vergleich zu herkömmlichem MVC ist es verständlich, dass die Logik des Controllers auf diese Hook-Funktionen verteilt ist.

Private Ressourcen (Assets): In Vue.js werden benutzerdefinierte Anweisungen, Filter, Komponenten usw. zusammenfassend als Ressourcen bezeichnet. Da global registrierte Ressourcen leicht zu Namenskonflikten führen können, kann eine Komponente ihre eigenen privaten Ressourcen deklarieren. Private Ressourcen können nur von der Komponente und ihren Unterkomponenten aufgerufen werden.

Darüber hinaus können Komponenten innerhalb desselben Komponentenbaums auch über die integrierte Ereignis-API kommunizieren. Vue.js bietet eine vollständige API zum Definieren, Wiederverwenden und Verschachteln von Komponenten, sodass Entwickler Komponenten verwenden können, um die gesamte Anwendungsschnittstelle wie Bausteine ​​zu erstellen.

Komponenten verbessern die Effizienz, Wartbarkeit und Wiederverwendbarkeit von Code erheblich.

Mit Komponente registrieren

1 Erstellen Sie einen Komponentenkonstruktor:

var MyComponent = Vue.extend({
//选项
})

2 . Verwenden Sie den Konstruktor als Komponente und registrieren Sie ihn bei Vue.component(tag,constructor):

Vue.component('my-component',MyComponent)

3. Im Modul der übergeordneten Instanz , verwenden Sie self. Definieren Sie das Element in der Form:

<div id = "example">
<my-component></my-component>
</div>

Beispiel:

<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: &#39;<div>A custom component!</div>&#39;
})
// 注册
Vue.component(&#39;my-component&#39;, MyComponent)
// 创建根实例
new Vue({
el: &#39;#example&#39;
})

wird wie folgt gerendert:

<div id = "example">
<div>A custom component!</div>
</div>

Die Vorlage der Komponente ersetzt das benutzerdefinierte Element, das nur als dient Befestigungspunkt. Mithilfe der Instanzoption „replace“ können Sie entscheiden, ob eine Ersetzung durchgeführt werden soll.

Lokale Registrierung

Registrierung mit den Instanzoptionskomponenten. Es ist nicht erforderlich, jede Komponente global zu registrieren. Sie können die Komponente nur in anderen Komponenten verwenden:

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
&#39;my-component&#39;: Child
}
})

Diese Kapselung funktioniert auch für andere Ressourcen wie Anweisungen, Filter und Übergänge.

Zucker der Registrierungssyntax

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: &#39;<div>A custom component!</div>&#39;
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
&#39;my-component&#39;: {
template: &#39;<div>A custom component!</div>&#39;
}
}
})

Probleme mit Komponentenoptionen

Die meisten an den Vue-Konstruktor übergebenen Optionen können dies auch tun Wenn Sie in Vue.extend() zusätzlich zu data und el einfach ein Objekt als Datenoption an Vue.extend() übergeben, teilen sich alle Instanzen dasselbe Datenobjekt, daher sollten wir eine Funktion als verwenden Datenoption. Lassen Sie diese Funktion ein neues Objekt zurückgeben:

var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})

Template-Parsing

Vues Vorlage ist eine DOM-Vorlage, die das verwendet Der native Template-Parser des Browsers muss daher ein gültiges HTML-Fragment sein. Einige HTML-Elemente unterliegen Einschränkungen hinsichtlich der Elemente, die darin platziert werden können:

a darf keine anderen interaktiven Elemente enthalten (z. B. Schaltflächen, Links). )

ul und ol können li nur direkt enthalten

select kann nur option und optgroup enthalten

table kann nur thead, tbody, tfoot, tr, caption, col direkt enthalten , colgroup

tr kann nur th und td direkt enthalten

In der Praxis können diese Einschränkungen zu unerwarteten Ergebnissen führen. Obwohl es in einfachen Fällen funktionieren kann, können Sie sich nicht auf das Ergebnis der Erweiterung einer benutzerdefinierten Komponente verlassen, bevor der Browser sie validiert. Beispielsweise ist

... keine gültige Vorlage, auch wenn die my-select-Komponente irgendwann erweitert wird ...

Ein weiteres Ergebnis ist, dass benutzerdefinierte Tags (einschließlich benutzerdefinierter Elemente und spezieller Tags wie ,