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 certaines données sont modifiées dynamiquement sur la page, ou des données apportées par des accessoires, ou des attributs définis dynamiquement via la fonction, les dernières données peuvent ne pas être affichées après la modification.

• 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.

Pour le moment, il vous suffit d'appeler la méthode d'actualisation partielle this.reloadPart() dans la méthode à sélection unique pour résoudre le problème. Il en va de même pour la sélection totale.

4. Chaque fois qu'une nouvelle colonne d'affichage est ajoutée, une zone vide apparaîtra dans le tableau. À ce stade, il suffit d'appeler la méthode d'actualisation complète de la page this.reload() une fois le nouvel enregistrement ajouté avec succès.

【Recommandation associée : "

Tutoriel vue.js

"】

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!