So verwenden Sie eine Komponente in vue.js

So verwenden Sie Komponenten in vue.js: 1. Erweitern Sie HTML-Elemente und kapseln Sie wiederverwendbaren Code. 2. Komponenten sind benutzerdefinierte Elemente, und der Compiler von [Vue.js] fügt ihm spezielle Funktionen hinzu in Form eines nativen HTML-Elements, erweitert um das Attribut is.

【Empfohlene verwandte Artikel: vue.js】

So verwenden Sie eine Komponente in vue.js:

Was ist eine Komponente?

Wie immer, Zitat Ein Satz von der offiziellen Vue-Website:

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.

Registrierung der Komponentenkomponente

Globale Komponente:

Vue.component('todo-item',{
  props:['grocery'],
  template:&#39;<li>{{grocery.text}}</li>&#39;
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

Lokale Registrierung:

var Child = {
 template: &#39;<div>A custom component!</div>&#39;
}
new Vue({
 // ...
 components: {
  // <my-component> 将只在父模板可用
  &#39;my-component&#39;: Child
 }
})

Anweisungen zum Parsen von DOM-Vorlagen

Komponenten unterliegen unter bestimmten HTML-Tags einigen Einschränkungen.

Zum Beispiel ist im Code unter dem Tabellen-Tag die Komponente ungültig.

<table>
 <my-row>...</my-row>
</table>

Die Problemumgehung besteht darin, die Komponente über das is-Attribut zu verwenden

<table>
 <tr is="my-row"></tr>
</table>

Es ist zu beachten, dass Sie nicht eingeschränkt werden, wenn Sie eine Zeichenfolgenvorlage aus einer der folgenden Quellen verwenden

<script type="text/x-template">

JavaScript-Inline-Vorlagenzeichenfolge

.vue Component

data verwendet Funktionen, um zu verhindern, dass mehrere Komponenten miteinander interagieren. Wenn auf eine Komponente geklickt wird, werden die Zähler aller Komponenten um eins erhöht.

Die Lösung lautet wie folgt:

js

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

Auf diese Weise verfügt jede Komponente nach der Generierung über einen eigenen exklusiven Zähler.

Verwandte kostenlose Lernempfehlungen:

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine Komponente in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!