So erstellen Sie Komponenten in Vue-js-Tutorial-php.cn

So erstellen Sie Komponenten in Vue

亚连

Freigeben： 2018-06-05 09:45:41

Original

2344 Leute haben es durchsucht

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({})

Nach dem Login kopieren

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

Nach dem Login kopieren

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;
  }
 }
})

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!