Comment utiliser les composants vue dans des projets pratiques

Cette fois, je vais vous montrer comment utiliser les composants vue dans des projets pratiques, et quelles sont les précautions à prendre pour utiliser les composants vue dans des projets pratiques. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Composants récursifs

Un composant peut s'appeler de manière récursive dans son modèle.

Un exemple est le suivant :

  <p id="app19">
   <my-component19 :count="1"></my-component19>
  </p>
Vue.component('my-component19',{
 name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
 props: {
  count: {
   type: Number,
   default: 1
  }
 },
 template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
 el: '#app19'
});

Le résultat du rendu est :

 <p id="app19">
  <p>
   <p>
    <p><!----></p>
   </p>
  </p>
 </p>

Après avoir défini le nom, il peut être utilisé de manière récursive dans le modèle de composant, mais il faut noter qu'une condition doit être donnée pour limiter le nombre de récursions, sinon une erreur sera renvoyée : taille maximale de la pile dépassée.

L'utilisation récursive de composants peut être utilisée pour développer certains composants indépendants avec des relations hiérarchiques inconnues, tels que des sélecteurs en cascade et des contrôles d'arborescence.

2. Modèle en ligne

Le modèle du composant est généralement défini dans l'option de modèle. Vue fournit une fonction en ligne. En utilisant un composant, utilisez l'attribut inline-template pour la balise de composant, et le composant traitera son contenu comme un modèle au lieu de le distribuer en tant que contenu, ce qui rend le modèle plus flexible.

Les exemples sont les suivants :

<p id="app20">
   <my-component20 inline-template>
    <p>
     <h3>在父组件中定义子组件的模板</h3>
     <p>{{msg}}</p>
    </p>
   </my-component20>
  </p>
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

3. Composants dynamiques

Vue.js fournit un élément spécial＜ composant> est utilisé pour monter dynamiquement différents composants. Utilisez l'attribut is pour sélectionner le composant à monter.

Les exemples sont les suivants :

<p id="app21">
   <component :is="currentView"></component>
   <button @click="changeView(&#39;A&#39;)">切换到A</button>
   <button @click="changeView(&#39;B&#39;)">切换到B</button>
   <button @click="changeView(&#39;C&#39;)">切换到C</button>
  </p>
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '<p>组件A</p>'
  },
  comB: {
   template: '<p>组件B</p>'
  },
  comC: {
   template: '<p>组件C</p>'
  }
 }
});

4. Composants asynchrones

Lorsque votre projet est suffisamment grand, utilisez les composants Lorsqu'il y en a suffisamment, il est temps de considérer les problèmes de performances, car le chargement de tous les composants au début représente une surcharge inutile.

Heureusement, Vue.js vous permet de définir un composant en tant que fonction d'usine et d'analyser dynamiquement le composant. Vue. Déclenche uniquement la fonction d'usine lorsque le composant doit être rendu et met en cache les résultats pour un nouveau rendu ultérieur. ​

 <p id="app22">
      <my-component22></my-component22>
    </p>
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '<p>我是异步渲染的</p>'
    })
  },2000)
});
var app22 = new Vue({
  el: '#app22'
});

La fonction d'usine reçoit un rappel de résolution et est appelée lors de la réception de la définition du composant téléchargée depuis le serveur. Vous pouvez également appeler rejet(raison) pour indiquer un échec de chargement.
Le setTimeout ici sert simplement à démontrer l'asynchronisme. La logique de téléchargement spécifique peut être décidée par vous-même. Par exemple, écrivez la configuration du composant en tant que configuration d'objet, demandez-la via Ajax, puis appelez solve pour transmettre les options de configuration.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les instructions de parcours de boucle dans vue

Comment utiliser le mécanisme de liaison de données angulaire

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!