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

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>

Component.vue

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

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

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

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

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!