Explication détaillée des composants de vue et réutilisation

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. Cet article présente principalement les composants vue et la réutilisation. Les amis dans le besoin peuvent se référer à

1. Qu'est-ce qu'un composant

Component ) en est-il un ? des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable.

2. Utilisation des composants

Les composants doivent être enregistrés avant de pouvoir être utilisés. Il existe deux méthodes d'enregistrement : l'enregistrement global et l'enregistrement local. inscription.

2.1 Après l'enregistrement global, n'importe quelle instance de V ue peut être utilisée. Par exemple :

 <p id="app1">
      <my-component></my-component>
    </p>
Vue.component(&#39;my-component&#39;,{
  template: &#39;<p>这里是组件的内容</p>&#39;
});
var app1 = new Vue({
  el: &#39;#app1&#39;
});

Pour utiliser ce composant dans l'instance parent, vous devez l'enregistrer avant la création de l'instance, puis vous pouvez utiliser < ;/my- composant> pour utiliser le composant sous la forme de

La structure DOM du modèle doit être contenue par un élément Si elle est écrite directement comme "voici le contenu du. composant" sans "

" ne peut pas être rendu. (Et la couche la plus externe ne peut avoir qu'une seule balise racine

)

2.2 Dans une instance Vue, vous pouvez utiliser l'option composant pour enregistrer un composant localement. Le composant enregistré n'est valide que dans le cadre de. l'instance. Par exemple :

    <p id="app2">
      <my-component1></my-component1>
    </p>
var app2 = new Vue({
  el: &#39;#app2&#39;,
  components:{
   &#39;my-component1&#39;: {
     template: &#39;<p>这里是局部注册组件的内容</p>&#39;
   }
  }
});

2.3 les données doivent être une fonction

En plus de l'option modèle, d'autres composants peuvent également être utilisés comme Instances Vue, telles que les données, calculées, méthodes, etc. Mais lors de l'utilisation de data, c'est légèrement différent de l'exemple data doit être une fonction, puis les données sont renvoyées.

    <p id="app3">
      <my-component3></my-component3>
    </p>
Vue.component(&#39;my-component3&#39;,{
  template: &#39;<p>{{message}}</p>&#39;,
  data: function(){
    return {
      message: &#39;组件内容&#39;
    }
  }
});
var app3 = new Vue({
  el: &#39;#app3&#39;
});

Généralement, l'objet renvoyé ne doit pas faire référence à un objet externe, car si l'objet renvoyé fait référence à un objet externe, alors cet objet est partagé , les modifications de chaque partie seront synchronisées.

Ainsi, un nouvel objet de données indépendant est généralement renvoyé au composant.

Supplément : problème de réutilisation des composants vue-router

Le système de composants est une partie importante de Vue, qui peut combiner une page complexe L'abstraction est décomposé en de nombreux petits composants indépendants et réutilisables, et l'application est composée en combinant les composants. Combiné avec la fonction de routage de vue-router, chaque composant est mappé à l'itinéraire correspondant et les changements dans le routage sont utilisés pour indiquer. Vue où rendre. Ils implémentent une navigation sautée entre divers composants et pages.

Problème

Lors de l'utilisation de vue-router pour changer d'itinéraire, cela déclenchera la mise à jour de l'arborescence des composants et affichera une nouvelle arborescence de composants basée sur l'itinéraire défini. Le processus approximatif de commutation est le suivant :

- Désactiver et supprimer les composants inutiles
- Vérifier la faisabilité de la commutation
- Réutiliser les composants qui n'ont pas été mis à jour
- Activer et activer de nouveaux composants

Pour un processus de contrôle de changement d'itinéraire spécifique, veuillez vous référer au document officiel : Switching Control Pipeline

Comment vue-router détermine-t-il qu'un certain composant peut être réutilisé ? Jetons un coup d'œil à la configuration de routage suivante :

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

Il s'agit de l'itinéraire qui charge la page d'article correspondante via l'ID d'article lorsqu'il est accessible pour le. la première fois, Post. Le composant vue sera rendu dans l'arborescence des composants. Lorsque le composant monté est installé, le contenu de l'article est obtenu via l'ID de l'article et affiché sur la page. Lorsque nous accédons à un autre article, le paramètre de routage : postId change. , et comme nous nous y attendions, le nouvel article devrait afficher le contenu de l'article, mais cela s'est retourné contre nous.

Ce que nous voyons est toujours l'article précédent. Bien que les paramètres de routage aient changé, vue-router pensera que vous accédez au composant Post.vue puisque le composant a été rendu auparavant, il sera copié directement. . Utilisez le composant précédent et n'effectuerez aucune opération dans le composant, y compris les fonctions de cycle de vie telles que le montage.

Donc, ce que nous finissons par voir, c'est le contenu du composant d'origine.

Alors, comment pouvons-nous obtenir l’effet souhaité ? Une solution efficace est présentée ci-dessous

Solution

Nous pouvons utiliser l'écouteur de surveillance pour surveiller les changements de routage en fonction du routage. Les paramètres changent en. répondre aux données correspondantes. Le processus de mise en œuvre spécifique est le suivant :

Définir la méthode d'acquisition de données

Définir d'abord une méthode pour obtenir les articles et obtenir les informations sur l'article correspondantes à partir de l'arrière-plan. l'identifiant de l'article.

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

Écoutez l'itinéraire

Ensuite, l'étape suivante consiste à déterminer si le composant cible est Post .vue lorsque l'itinéraire est commuté. Composant, cela peut être implémenté en fonction du nom de routage défini. Si tel est le cas, nous pouvons obtenir l'ID de l'article cible à partir des informations de routage pour mettre à jour le contenu du composant.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

Initialisation du composant

Ce qu'il faut noter ici, c'est que lorsque le composant est monté pour la première fois sur l'arborescence des composants Une fois monté, le suivi du routage n'est pas valide. A ce moment, nous devons initialiser le composant dans le hook de cycle de vie monté :

mounted() {
  this.getPost(this.$route.params.postId);
}

Écrit à la fin

Grâce à la méthode ci-dessus, le contenu du composant peut être mis à jour à mesure que les paramètres de routage changent, ce qui résout efficacement le problème des paramètres de routage invalides causés par la réutilisation de vue- composants du routeur.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

JavaScript génère une liste de temps dans une plage spécifiée

Explication détaillée des paramètres basée sur le webpack. config.js

Méthode Nodejs pour implémenter le téléchargement de fichiers basé sur express

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!