Vue component communication: use v-for directive for list rendering communication

Vue component communication: Use the v-for directive for list rendering communication

In Vue.js, component communication is a very important part. One of the commonly used component communication methods is to use the v-for instruction for list rendering communication. Through the v-for directive, we can easily render a list and communicate between components in the list.

Example scenario:
Suppose we have a TodoList component that needs to render a to-do list and be able to implement the functions of adding, completing, and deleting items. Each item in the list is a separate component, and we want these components to communicate with each other.

Code implementation:
First, we need to create a TodoItem component to render the content of each to-do item. In this component, we can use the props attribute to receive data passed by the parent component.

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

Then, we need to use the v-for directive in the parent component to render the to-do list and communicate with the child component.

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

In the above code, we use the v-for directive to loop through rendering each TodoItem component and pass each item to the child component through the props attribute. When the delete button in the child component is clicked, the custom event will be triggered through the $emit method and the items to be deleted will be passed to the parent component.

Through such a simple code implementation, we can implement the functions of adding, completing and deleting to-do items, and the components can communicate with each other.

Summary:
By using the v-for directive for list rendering communication, we can manage our components more flexibly and facilitate communication between components. In actual development, we can flexibly use the v-for instruction according to actual needs to improve development efficiency.

The above is an example and explanation of using the v-for instruction for list rendering communication. I hope it will be helpful for you to understand Vue component communication!

The above is the detailed content of Vue component communication: use v-for directive for list rendering communication. For more information, please follow other related articles on the PHP Chinese website!