Communication des composants Vue : utilisez la directive v-for pour la communication du rendu de liste

Communication des composants Vue : utilisez la directive v-for pour la communication du rendu de liste

Dans Vue.js, la communication des composants est une partie très importante. L'une des méthodes de communication de composants couramment utilisées consiste à utiliser l'instruction v-for pour la communication de rendu de liste. Grâce à la directive v-for, nous pouvons facilement restituer une liste et communiquer entre les composants de la liste.

Exemple de scénario :
Supposons que nous ayons un composant TodoList qui doit afficher une liste de tâches et être capable d'implémenter les fonctions d'ajout, de complétion et de suppression d'éléments. Chaque élément de la liste est un composant distinct et nous souhaitons que ces composants communiquent entre eux.

Implémentation du code :
Tout d'abord, nous devons créer un composant TodoItem pour restituer le contenu de chaque élément de tâche. Dans ce composant, nous pouvons utiliser l'attribut props pour recevoir les données transmises par le composant parent.

<template>
  <div class="todo-item">
    <input type="checkbox" v-model="isChecked" @change="completeTask">
    <span :class="{ 'completed': isChecked }">{{ item }}</span>
    <button @click="deleteTask">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    completeTask() {
      this.isChecked = !this.isChecked;
    },
    deleteTask() {
      this.$emit('delete-task', this.item);
    }
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

Ensuite, nous devons utiliser la directive v-for dans le composant parent pour afficher la liste de tâches et communiquer avec le composant enfant.

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" v-model="newTask" @keydown.enter="addTask">
    <div class="todo-list">
      <todo-item v-for="(task, index) in tasks" :key="index" :item="task" @delete-task="deleteTask" />
    </div>
  </div>
</template>

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

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      tasks: [],
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    },
    deleteTask(item) {
      const index = this.tasks.indexOf(item);
      if (index !== -1) {
        this.tasks.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
.todo-list {
  margin-top: 20px;
}
</style>

Dans le code ci-dessus, nous avons utilisé la directive v-for pour restituer chaque composant TodoItem dans une boucle et transmettre chaque élément au composant enfant via l'attribut props. Lorsque vous cliquez sur le bouton Supprimer du composant enfant, l'événement personnalisé sera déclenché via la méthode $emit et les éléments à supprimer seront transmis au composant parent.

Grâce à une implémentation de code aussi simple, nous pouvons implémenter les fonctions d'ajout, de complétion et de suppression d'éléments de tâche, et les composants peuvent communiquer entre eux.

Résumé :
En utilisant la directive v-for pour la communication de rendu de liste, nous pouvons gérer nos composants de manière plus flexible et faciliter la communication entre les composants. Dans le développement réel, nous pouvons utiliser de manière flexible l'instruction v-for en fonction des besoins réels pour améliorer l'efficacité du développement.

Ce qui précède est un exemple et une explication de l'utilisation de l'instruction v-for pour la communication de rendu de liste. J'espère que cela vous sera utile pour comprendre la communication des composants 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!