Laissez-moi vous expliquer en détail comment implémenter une actualisation complète ou partielle dans Vue

Comment implémenter l'actualisation de page dans vue ? L'article suivant vous présentera comment implémenter l'actualisation complète de la page et l'actualisation partielle dans Vue. J'espère que cela vous sera utile !

1. Actualisation complète de la page

1. Modifiez App.vue, le code est le suivant :

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

Les points clés sont comme indiqué dans la figure ci-dessous :

2. qui doit être actualisé et utilisé inject pour importer et recharger la référence ：

3. Appelez this.reload() dans la méthode qui doit être appelée

2. variable isReloadData et liez la variable aux données qui doivent être rafraîchies. Sur l'étiquette :

2. Définissez la méthode de rafraîchissement partiel reloadPart :

3. Appelez-la dans la méthode qui a besoin pour effectuer un rafraîchissement partiel

3. Scénarios d'application

• Lorsque les données de la page changent, il y aura des bugs dans le rendu de la page. Par exemple, après la modification des données du composant el-table, une zone vide apparaîtra.
• Pour le moment, l'actualisation complète ou partielle sera utile. La capture d'écran ci-dessous est un exemple de la deuxième situation que j'ai rencontrée, qui a été résolue en utilisant l'actualisation complète et partielle :

1. par défaut et rendu de la page Normal :

2. Cochez une colonne d'affichage, et la page s'affiche normalement :

3.

【Recommandation associée : "

"】

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!