Comment utiliser correctement la fonction de réutilisation des composants Vue

Cette fois, je vais vous montrer comment utiliser correctement la fonction de réutilisation du composant vue, et quelles sont les précautions pour utiliser correctement la fonction de réutilisation du composant vue. Voici des cas pratiques, jetons un oeil.

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 formée en combinant des composants, et combinée avec la fonction de routage de vue-router pour mapper chaque composant à l'itinéraire correspondant, indiquant Vue où les restituer grâce aux changements de routage et en réalisant une navigation sautée entre différents 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. le contenu du nouvel article devrait ê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 déjà été rendu, il sera copié directement. . Utilisez le composant précédent et n'effectuera aucune opération dans le composant, y compris les fonctions cycle de vie telles que montées.

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 spécifique de mise en œuvre est le suivant :

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

首先定义一个获取文章的方法，根据文章ID从后台获取对应的文章信息。

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

监听路由

接着是在路由切换的时候判断目标组件是否是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);
}

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

推荐阅读：

怎样使用React高阶组件

如何正确解决Vue 项目中遇到跨域问题

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!