Kommunikation zwischen Komponenten, die Sie jeden Tag in Vue.js lernen müssen

Was sind Komponenten?

Komponente ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form nativer HTML-Elemente vorliegen, erweitert um das Attribut is.

Komponente verwenden

Registrieren

Wie bereits erwähnt, können wir Vue.extend() verwenden, um einen Komponentenkonstruktor zu erstellen:

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

Um diesen Konstruktor als Komponente zu verwenden, müssen Sie „Vue.component(tag, constructionor)“ verwenden. **Registrierung**:

// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)

Für benutzerdefinierte Tag-Namen erzwingt Vue.js keine W3C-Regeln (Kleinschreibung und Bindestrich), obwohl es besser ist, diese Regel zu befolgen.

Nachdem die Komponente registriert wurde, kann sie im Modul der übergeordneten Instanz als benutzerdefiniertes Element verwendet werden. Stellen Sie sicher, dass Sie die Komponente registrieren, bevor Sie die Root-Instanz initialisieren:

<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>

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

Lokale Registrierung

Es ist nicht erforderlich, jede Komponente global zu registrieren. Sie können die Komponente nur in anderen Komponenten verwenden lassen, indem Sie sie mit der Instanzoption Komponenten registrieren:

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

Diese Kapselung eignet sich auch für andere Ressourcen, z B. Anweisungen, Filter und Übergänge.

Syntaktischer Registrierungszucker

Um Ereignisse zu vereinfachen, können Sie das Optionsobjekt anstelle des Konstruktors direkt an Vue.component() und Komponentenoptionen übergeben. Vue.js ruft hinter den Kulissen automatisch Vue.extend() auf:

// 在一个步骤中扩展与注册
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;
 }
 }
})

Problem mit Komponentenoptionen

Die meisten Optionen des Vue-Konstruktors kann auch in Vue.extend() verwendet werden, es gibt jedoch zwei Sonderfälle: data und el. Stellen Sie sich vor, wir würden einfach ein Objekt als Datenoption an Vue.extend() übergeben: Instanzen teilen sich dasselbe „Daten“-Objekt! Das ist im Grunde nicht das, was wir wollen, also sollten wir eine Funktion als „Daten“-Option verwenden und diese Funktion ein neues Objekt zurückgeben lassen:

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

Identisch mit Allerdings muss die Option „el“ auch eine Funktion sein, wenn sie in „Vue.extend()“ verwendet wird.

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

Template-Parsing

Die Vorlage von Vue ist eine DOM-Vorlage. Verwenden Sie den nativen Parser des Browsers, anstatt selbst einen zu implementieren. DOM-Vorlagen haben einige Vorteile gegenüber String-Vorlagen, haben aber auch das Problem, dass es sich um ein gültiges HTML-Fragment handeln muss. Für einige HTML-Elemente gelten Einschränkungen hinsichtlich der Elemente, die darin platziert werden können. Allgemeine Einschränkungen:

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

•ul und ol können nur direkt li enthalten.
•select kann nur option und optgroup enthalten.

•table only Can direkt thead, tbody, tfoot, tr, caption, col, colgroup enthalten

•tr kann nur th und td direkt enthalten

In der Praxis führen diese Einschränkungen zu unerwarteten Ergebnissen. 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, selbst wenn die my-select-Komponente schließlich zu erweitert wird. .
Ein weiteres Ergebnis ist, dass benutzerdefinierte Tags (einschließlich benutzerdefinierter Elemente und spezieller Tags wie ,