Méthode de synchronisation des données de la liste de vues

Vue est un framework progressif pour la création d'interfaces utilisateur et est actuellement l'un des frameworks les plus populaires en développement front-end. Dans le développement de Vue, la synchronisation des données de liste est un problème relativement complexe. Cet article présentera quelques méthodes de synchronisation des données de liste Vue.

1. Transfert de données entre composants

Dans Vue, les composants sont les unités de base de la réutilisation du code et de l'organisation logique, et le transfert de données entre les composants nécessite l'utilisation d'attributs props et l'émission d'événements. Lors de la synchronisation des données de la liste, le composant parent transmet les données au composant enfant via l'attribut props. Une fois que le composant enfant a modifié les données, il transmet les données au composant parent via l'événement d'émission, réalisant ainsi la synchronisation de la liste. données.

Lors de l'utilisation des attributs props, vous devez faire attention aux points suivants :

1. Les données déclarées par props dans le composant ne permettent pas de modification directe par les sous-composants pour éviter toute confusion de données.
2. Le composant parent lie les données à l'attribut props via la directive v-bind, afin qu'elles puissent être utilisées dans le composant enfant.
3. Le composant enfant déclenche l'événement enregistré par le composant parent via la méthode $emit et fournit les données modifiées.

L'exemple de code est le suivant :

Composant parent :

<template>
  <div>
    <child-component :list="list" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  methods: {
    handleChange(newList) {
      this.list = newList;
    }
  },
  components: {
    ChildComponent
  }
};
</script>

Composant enfant :

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    handleInputChange(item) {
      this.$emit('change', this.list);
    }
  }
};
</script>

Dans le code ci-dessus, le composant parent transmet les données de la liste au composant enfant via l'attribut props, et le composant enfant restitue les données de la liste via l'instruction v-for Lorsque la zone de saisie dans le composant enfant change, l'événement de changement enregistré par le composant parent est déclenché via la méthode $emit et les données de liste modifiées sont transmises au composant parent.

2. Gestion de l'état Vuex

Vuex est la bibliothèque de gestion d'état officiellement fournie par Vue. Elle réalise la fonction de partage des données et de l'état entre les composants en stockant et en gérant de manière centralisée l'état de tous les composants de l'application. Dans la synchronisation des données de liste, le partage et la synchronisation des données de liste peuvent être réalisés via Vuex.

Lorsque vous utilisez Vuex, vous devez faire attention aux points suivants :

1. Vous devez introduire la bibliothèque Vuex dans l'application Vue et enregistrer l'instance du magasin.
2. Les données de la liste doivent être stockées dans l'état de Vuex.
3. Les composants peuvent accéder et modifier les données dans l'état via Vuex pour réaliser la synchronisation.

L'exemple de code est le suivant :

store.js :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    list: [
      { id: 1, name: 'Vue' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' }
    ]
  },
  mutations: {
    updateList(state, newList) {
      state.list = newList;
    }
  }
});

Composant parent :

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

Composant enfant :

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: mapState(['list']),
  methods: {
    ...mapMutations(['updateList']),
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

Dans le code ci-dessus, le tableau de liste est défini dans l'état et le composant parent non ne transmet plus les données au composant enfant. Le sous-composant obtient les données de liste dans l'état via la fonction mapState et restitue les données de liste. Lorsque la zone de saisie du sous-composant change, les nouvelles données de liste sont soumises à la méthode updateList dans les mutations via la fonction mapMutations, mettant ainsi à jour les données dans l'état.

3. $emit et provide/inject

Dans la version Vue2.2.0, une nouvelle API de fourniture/injection de données et d'injection est ajoutée grâce à cette API, la fonction d'injection dynamique de données dans les composants peut être réalisée. Dans la synchronisation des données de liste, le partage et la synchronisation des données peuvent être réalisés via provide/inject.

Lorsque vous utilisez l'API provide/inject, vous devez faire attention aux points suivants :

1. Les données à partager sont définies dans provide, et les données à injecter sont déclarées dans inject.
2. Vous pouvez utiliser la fonction flèche dans provide pour lier dynamiquement les données afin de mettre à jour dynamiquement les données une fois les données mises à jour.
3. Il n'est pas recommandé d'utiliser des données réactives dans la fourniture, ce qui peut entraîner une imprévisibilité des mises à jour des données.

L'exemple de code est le suivant :

Composant Parent :

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  provide() {
    return {
      list: this.list,
      updateList: (newList) => {
        this.list = newList;
      }
    }
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Composant Enfant :

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="text" v-model="item.name" @change="handleInputChange(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['list', 'updateList'],
  methods: {
    handleInputChange(item) {
      this.updateList(this.list);
    }
  }
};
</script>

Dans le code ci-dessus, le composant parent fournit les méthodes list et updateList via provide pour réaliser le partage et la synchronisation des données de liste. Dans le sous-composant, les méthodes list et updateList qui doivent être injectées sont déclarées via inject, afin d'accéder et de modifier les données de la liste.

Conclusion

Grâce aux trois méthodes ci-dessus, les données de la liste Vue peuvent être synchronisées. Dans les applications pratiques, différentes méthodes peuvent être sélectionnées en fonction de situations spécifiques pour réaliser la synchronisation des données. Parmi eux, le transfert de données entre composants est la méthode la plus basique et la plus couramment utilisée, tandis que Vuex et provide/inject sont plus adaptés à la gestion d'état et au partage de données dans les grandes applications.

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!