Comment implémenter la réutilisation des composants Vue dans des projets réels

Cette fois, je vais vous montrer comment réutiliser les composants vue dans des projets pratiques. Quelles sont les précautions à prendre pour réutiliser les composants vue dans des projets pratiques. Voici des cas pratiques, jetons un coup d'œil.

1. Qu'est-ce qu'un composant

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.

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('my-component',{
  template: '<p>这里是组件的内容</p>'
});
var app1 = new Vue({
  el: '#app1'
});

Pour utiliser ce composant dans l'instance parent, vous devez l'enregistrer avant la création de l'instance. Vous pouvez ensuite utiliser le composant sous la forme

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

< /p>". (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: '#app2',
  components:{
   'my-component1': {
     template: '<p>这里是局部注册组件的内容</p>'
   }
  }
});

2.3 les données doivent être une fonction

En plus de l'option de modèle, les composants peuvent également utiliser d'autres options comme les instances Vue, telles que les données, les calculs, les 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('my-component3',{
  template: '<p>{{message}}</p>',
  data: function(){
    return {
      message: '组件内容'
    }
  }
});
var app3 = new Vue({
  el: '#app3'
});

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é, et les modifications de part et d'autre 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 la route qui charge la page d'article correspondante via l'ID de l'article. Lors du premier accès, le composant Post.vue sera rendu dans. l'arborescence des composants, montée Lors de l'installation du composant, le contenu de l'article est obtenu via l'ID de l'article et affiché sur la page, le paramètre de routage : postId change Selon nos attentes, le contenu du nouvel article doit. être affiché, mais cela se retourne contre vous.

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

Parcours d'écoute

接着是在路由切换的时候判断目标组件是否是Post.vue组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

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

组件初始化

这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：

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

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue项目中watch的immediate使用

create-react-app配置eslint步骤详解

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!