Heim >Web-Frontend >js-Tutorial >So erstellen Sie Komponenten in Vue

So erstellen Sie Komponenten in Vue

亚连
亚连Original
2018-06-05 09:45:412467Durchsuche

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: &#39;<p>This is the first component!</p>&#39;
})
var vm1 = new Vue({
 el: &#39;#app1&#39;
})

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: &#39;#app2&#39;,
 components: {
  // 局部注册,my-component2是标签名称
  &#39;my-component2&#39;: {
   template: &#39;<p>This is the second component!</p>&#39;
  },
  // 局部注册,my-component3是标签名称
  &#39;my-component3&#39;: {
   template: &#39;<p>This is the third component!</p>&#39;
  }
 }
})

== 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=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </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=&#39;box&#39;>  
 <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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn