Detaillierte Erläuterung der vue.js-Instanzobjekte und Komponentenbauminstanzen

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Instanzobjekt + Komponentenbaum von vue.j vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

Instanzobjekt von Vue

Verwenden Sie zunächst das neue Schlüsselwort von js, um ein Vue zu instanziieren

el: Der Ort, an dem die Vue-Komponente oder das Vue-Objekt auf der Seite geladen wird kann per ID oder Klasse oder Tag-Name übergeben werden

Vorlage: geladener Inhalt. HTML-Code/HTML-Fragment, das Anweisungen oder andere Komponenten enthält. Die Vorlage ist die von uns verwendete Vorlage

**Daten:** Daten werden durch Daten in die Komponente eingeführt

Die Daten in den Komponentendaten wird in Form einer Funktion zurückgegeben. Wenn verschiedene Schnittstellen dieselbe Komponente verwenden, wird der Inhalt anderer Seiten nicht geändert, da sich der Wert einer Komponente ändert.

{{ }} Variablen, die Daten in doppelte Klammersyntax setzen

Zucker der Komponentenregistrierungssyntax

Globale Komponente

Eine Methode:

Rufen Sie die Vue.extend()-Methode auf, um den Komponentenkonstruktor zu erstellen

Rufen Sie die Vue.component-Methode (Komponentenbezeichnung, Komponentenkonstruktor) auf, um die Komponente zu registrieren

Die Komponente

/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
 /*组件内容*/
 template:…… ,
 data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);

B-Methode kann nur im Rahmen der Vue-Instanz verwendet werden (dasselbe wie die A-Methode, nur in einfacher Schreibweise):

Ohne den ersten Schritt Rufen Sie in der A-Methode direkt die Methode Vue.component (Labelname, Optionsobjekt) auf

/*B方法 全局组件2:*/
Vue.component('my-component2', {
  /*组件内容*/
 template:…… ,
 data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

Lokale Komponenten verwenden das Komponentenattribut

"javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
"

Unterkomponente

Die Erstellungsmethode und die beiden oben genannten Methoden sind ähnlich, mit der Ausnahme, dass der Speicherort innerhalb der Komponente platziert wird.

var compentChild ={
  el:……,
  data:……
}
component: {
  el: ……,
  data: {……}
  components: {
   'component-child': componentChild
  }
}

Eingebaute Komponenten

Es besteht keine Notwendigkeit, Komponenten in Komponenten zu deklarieren. Verwenden Sie stattdessen Tags direkt. Wenn Sie beispielsweise wie unten gezeigt integrierte Komponenten in myHeader verwenden, sind Root-View, Keep-Alive usw. ebenfalls integrierte Komponenten, die von Vue selbst bereitgestellt werden.

 var myHeader = {
   template: '<component></component> <root-view></rooot-view>'
 }

Verwandte Empfehlungen:

Teilen der internen Methode zum Aufrufen einer untergeordneten Komponente durch eine übergeordnete Komponente in vue.js

Teilen von Kommunikationsbeispielen für Vue .js-Komponenten

Erste Einführung in *.Vue-Dateien in Vue.js_vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der vue.js-Instanzobjekte und Komponentenbauminstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!