Comment utiliser le composant dans vue.js

Comment utiliser les composants dans vue.js : 1. Étendre les éléments HTML et encapsuler le code réutilisable ; 2. Les composants sont des éléments personnalisés et le compilateur de [Vue.js] y ajoute des fonctions spéciales ; les composants peuvent également se présenter sous la forme d'éléments HTML natifs, étendus avec l'attribut is.

[Articles connexes recommandés : vue.js]

Comment utiliser un composant dans vue.js :

Qu'est-ce qu'un composant

Selon la convention , citant Une phrase du site officiel de Vue :

Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également prendre la forme d'éléments HTML natifs, étendus avec l'attribut is.

Enregistrement du composant composant

Composant global :

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":"其他"}
    ]
  }
})

rrree

Enregistrement local :

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

Instructions d'analyse du modèle DOM

Les composants seront soumis à certaines restrictions sous certaines balises HTML.

Par exemple, dans le code, sous la balise table, le composant est invalide.

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

En guise de solution de contournement, utilisez le composant

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

via l'attribut is. Il est à noter que si vous utilisez un modèle de chaîne provenant de l'une des sources suivantes, vous ne serez pas restreint <. 🎜>

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

Chaîne de modèle en ligne JavaScript

Component.vue

les données utilisent des fonctions pour éviter que plusieurs composants ne s'affectent mutuellement

html

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

js

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

Comme ci-dessus, il y a trois composants sous le div, et chaque composant partage un compteur. Lorsqu'un composant est cliqué, les compteurs de tous les composants seront incrémentés de un.

La solution est la suivante

js

var data = { counter: 0 }
Vue.component('simple-counter', {
 template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,
 data: function () {
  return data
 }
})
new Vue({
 el: &#39;#example-2&#39;
})

De cette façon, une fois généré chaque composant, il aura son propre compteur exclusif.

Recommandations d'apprentissage gratuites associées :

JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!