suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der globalen und lokalen Komponenten von Vue

Detaillierte Erläuterung der globalen und lokalen Komponenten von Vue

小云云
小云云Original
2018-05-28 14:23:461818Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung globaler Komponenten und lokaler Komponenten von Vue vor. Ich hoffe, dass er jedem helfen kann.

Component 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. Persönlich denke ich, dass es sich um ein Codefragment der Strukturschicht handelt, das wiederverwendet werden kann.

Globale Komponentenregistrierungsmethode: Vue.component (Komponentenname, {Methode})

z. B.:

<body>
<p id="app">
<my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局组件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

Rendering-Ergebnis: 

<p id="app">
  <h1>我是全局组件</h1>
</p>
<p id="app1">
  <h1>我是全局组件</h1>
</p>

Hinweis hier:

1. Globale Komponenten müssen vor der Erstellung der Vue-Instanz geschrieben werden, bevor sie unter dem Stammelement wirksam werden

; 🎜 >Dadurch wird nur das gerendert, was sich unter dem Stammelement von app1 befindet, nicht das, was sich unter dem Stammelement von app befindet, und es wird ein Fehler gemeldet. 

<body>
<p id="app">
  <my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>
2. Es darf nur ein Tag auf der ersten Ebene in der Vorlage vorhanden sein und kann nicht parallelisiert werden.

Dies führt zu einem Fehler und wir sollten nur das erste Tag rendern sieht so aus: Schreiben Sie: 

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>" +
    "<p>我是全局组件内标签</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

Registrierungsmethode für lokale Komponenten, registrieren Sie sich direkt in der Vue-Instanz

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件<p>" +
    "我是全局组件内标签</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>
z. B.:

Lokale Komponenten müssen bezahlt werden Achtung: 
<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });
</script>

1. Der Attributname ist „components“, nicht vergessen

2 Die Routine ist relativ tief, daher wird empfohlen, die Vorlage zu definieren eine globale Variable. Der Code sieht einfacher aus, wie folgt: (Wenn es viele Vorlagen-Tags gibt, ist es prägnanter und regelmäßiger, so zu schreiben)

In Bezug auf andere Attribute in der Komponente können sie sein das gleiche wie im Beispiel, aber das Datenattribut muss eine Funktion sein: 

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<h1>我是局部组件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>
z. B.:

Ergebnisse anzeigen: 

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<button @click=&#39;add2&#39;>我是局部组件:{{m2}}</button>",
    data:function(){
      return {m2:1}
    },
    methods:{
      add2:function(){
        this.m2++
      }
    }
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  })
</script>
</body>

Globale Komponenten sind die gleichen wie lokale Komponenten, Daten müssen auch eine Funktion sein:

Ergebnisse anzeigen:

<body>
<p id="app1">
  <my-component></my-component>
</p>
<script>
  Vue.component("my-component",{
    template:"<button @click=&#39;add1&#39;>全局组件：{{m1}}</button>",
    data:function(){
      return {
        m1:10
      }
    },
    methods:{
      add1:function(){
        this.m1++
      }
    }
  });
  new Vue({
    el:"#app1"
  })
</script>
</body>

Bei Verwendung von DOM als Vorlage (z. B. Anhängen der Option
an ein vorhandenes Element). Bei HTML unterliegen Sie einigen Einschränkungen, da Vue den Vorlageninhalt erst abrufen kann, nachdem der Browser den HTML-Code analysiert und normalisiert. Insbesondere Elemente wie

,

, el und ff6d136ddc5fdfeffaf53ff6ee95f185 begrenzen die Elemente, die von ihnen umschlossen werden können, und einige Elemente wie c34106e0b4e09414b63b2ea253ff83d6 können nur innerhalb bestimmter anderer Elemente erscheinen. f5d188ed2c074f8b944552db028f98a1221f08282418e2996498697df914ce4eBenutzerdefinierte Komponente5a07473c87748fb1bf73f23d45547ab8 gilt als ungültiger Inhalt und führt zu Fehlern beim Rendern. Die Problemumgehung besteht darin, das spezielle

-Attribut zu verwenden:

56a7f77827449f460eaecf34d1fd1efdz. B.:is

Das Rendering-Ergebnis ist: 

<body>
<p id="app1">
<ul>
  <li is="my-component"></li>
</ul>
</p>
<script>
 Vue.component("my-component",{
   template:"<h1>{{message}}</h1>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1"
 })
</script>
</body>

Für Das globale In Bezug auf das Problem des lokalen Bereichs können wir es so verstehen. Solange die Variablen innerhalb der Komponente verwendet werden, müssen diese Variablen intern für die Komponente sein und die in der externen HTML-Struktur referenzierten Variablen beziehen sich auf die Instanz unter Die Variable

zB:

Popup-Box zeigt: Ich bin lokal 

<body>
<p id="app1">
<my-component></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click=&#39;add3&#39;>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   },
   methods:{
     add3:function(){
       alert("我是局部")
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>
Das sogenannte Globale in Vue bezieht sich auf den Bereich unter dem Mount ;

Der folgende Ansatz ist meiner Meinung nach falsch: Ich bin global, aber es wird ein Fehler gemeldet, was bedeutet, dass die Komponente global ist und keine Standardereignisse hinzufügen kann Ereignisfunktion, es muss eine Eltern-Kind-Kommunikation sein

Zusätzliche Themen: 

<body>
<p id="app1">
<my-component @click="add3"></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click=&#39;add3&#39;>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>
1. Auf die Funktionsrückgabe muss der zurückgegebene Inhalt folgen

zB:

Die folgende Schreibmethode gibt keinen Wert zurück:

2 ist dasselbe wie bei kleinen Programmen, die die es6-Funktionsschreibmethode verwenden. Zeigt dies auf das gleiche

Ergebnis: 

<body>
<p id="app1">
  <button @click="f">ES5</button>
  <button @click="f1">ES6</button>
</p>
<script>
new Vue({
  el:"#app1",
  methods:{
    f:function(){
     console.log(this)
    },
    f1:()=>{
      console.log(this)
    }
  }
})
</script>
</body>
Das erste bezieht sich auf die Vue-Instanz

Das zweite bezieht sich auf Fenster

Da es sich von einem kleinen Programm unterscheidet, habe ich festgestellt, dass es sich bei Daten auf Fenster bezieht und bei Methoden auf die Vue-Instanz

Also schlage ich vor, dass Sie es in es5 schreiben

new Vue({
  el:"#app1",
  data:{that:this},
})

Verwandte Empfehlungen:


Detaillierte Erklärung des Elternteils -Untergeordnete Kommunikation von Vue-Komponenten

vue Detaillierte Erläuterung der drei Schreibformen von Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der globalen und lokalen Komponenten von 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
Vorheriger Artikel：So lösen Sie das Problem der Vorlagenkompilierung in Vue.jsNächster Artikel：So lösen Sie das Problem der Vorlagenkompilierung in Vue.js

In Verbindung stehende Artikel

Mehr sehen