Heim >Web-Frontend >js-Tutorial >So erstellen Sie Komponenten in Vue
Welche Methoden gibt es zum Erstellen von Komponenten in Vue? Im Folgenden werde ich Ihnen eine Zusammenfassung von zwei Methoden zum Erstellen von Komponenten in Vue geben. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich sein wird.
Zusammenfassung von zwei Methoden zum Erstellen von Komponenten
1. Globale Registrierung
2. Lokale Registrierung
var child=Vue.extend({}) var parent=Vue.extend({})
Die globale Methode Vue.extend() generiert einen Konstruktor und erstellt eine Unterklasse
Verwenden Sie den Basis-Vue-Konstruktor, um eine „Unterklasse“ zu erstellen.
So zu schreiben ist sehr umständlich. Daher wurde Vue vereinfacht
Verwenden Sie Vue.component(), um Komponenten direkt zu erstellen und zu registrieren:
Die globale Methode Vue.component(id, options) wird zum Registrieren globaler Komponenten verwendet
id ist vom Typ String, also der Name der registrierten Komponente
options ist ein Objekt
// 全局注册,my-component1是标签名称 Vue.component('my-component1',{ template: '<p>This is the first component!</p>' }) var vm1 = new Vue({ el: '#app1' })
Vue.component() Der erste Parameter ist der Labelname und der zweite Parameter ist ein Optionsobjekt. Verwenden Sie das Vorlagenattribut des Optionsobjekts, um die Komponentenvorlage zu definieren.
Mit dieser Methode ruft Vue hinter den Kulissen automatisch Vue.extend() auf.
Implementieren Sie die lokale Registrierung im Komponentenattribut des Optionsobjekts:
var vm2 = new Vue({ el: '#app2', components: { // 局部注册,my-component2是标签名称 'my-component2': { template: '<p>This is the second component!</p>' }, // 局部注册,my-component3是标签名称 'my-component3': { template: '<p>This is the third component!</p>' } } })
== Lokale Registrierung wird platziert die Option Im Objekt erstellt==
Hinweis: Hier handelt es sich um Komponenten, mehrere Komponenten können darin definiert werden.
Das vereinfachte Schreiben ist so
<body> <p id='box'> <parent> </parent> </p> <script src='js/vue.js'></script> <script> Vue.component('parent',{ template:`<p><h1>我是父组件</h1><child></child></p>`, components:{ 'child':{ template:`<h1>我是子组件</h1>` } } }) new Vue({ el:'#box' }) </script> </body>
Registrieren Sie einen Elternteil Komponente. Registrieren Sie dann eine untergeordnete Unterkomponente im Optionsobjekt der übergeordneten Komponente. Schreiben Sie das Tag der untergeordneten Komponente in die Vorlage der übergeordneten Komponente.
Die Stilstruktur auf der Seite ist
<p> <h1>我是父组件</h1> <h1>我是子组件</h1> </p>
Hinweis: Lokal registrierte Unterkomponenten können nicht alleine verwendet werden Direkt nutzen!
Wenn das Tag in p aufgehängt ist, wird ein Fehler gemeldet
<p id='box'> <child></child> </p>
Das Obige ist Was ich für alle zusammengestellt habe, hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Wie definiere ich meine eigene ausgewählte Komponente basierend auf ng-alain in Angular?
So implementieren Sie Änderungen an Überwachungsobjekten und entsprechenden Werten in Vue
So lösen Sie das Problem dass Vue keine Arrays erkennen kann oder Probleme mit Objektänderungen hat?
Das obige ist der detaillierte Inhalt vonSo erstellen Sie Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!