Komunikasi komponen Vue: gunakan arahan v-untuk untuk komunikasi pemaparan senarai

Komunikasi komponen Vue: Gunakan arahan v-for untuk komunikasi pemaparan senarai

Dalam Vue.js, komunikasi komponen ialah bahagian yang sangat penting. Salah satu kaedah komunikasi komponen yang biasa digunakan ialah menggunakan arahan v-for untuk komunikasi rendering senarai. Melalui arahan v-for, kami boleh membuat senarai dengan mudah dan berkomunikasi antara komponen dalam senarai.

Contoh senario:
Andaikan kita mempunyai komponen TodoList yang perlu menghasilkan senarai tugasan dan dapat melaksanakan fungsi menambah, melengkapkan dan memadam item. Setiap item dalam senarai adalah komponen yang berasingan, dan kami mahu komponen ini berkomunikasi antara satu sama lain.

Pelaksanaan kod:
Pertama, kita perlu mencipta komponen TodoItem untuk memaparkan kandungan setiap item tugasan. Dalam komponen ini, kita boleh menggunakan atribut props untuk menerima data yang diluluskan oleh komponen induk.

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

Kemudian kita perlu menggunakan arahan v-for dalam komponen induk untuk memaparkan senarai tugasan dan berkomunikasi dengan komponen anak.

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

Dalam kod di atas, kami menggunakan arahan v-for untuk menjadikan setiap komponen TodoItem dalam gelung dan menghantar setiap item kepada komponen anak melalui atribut props. Apabila butang padam dalam komponen anak diklik, acara tersuai akan dicetuskan melalui kaedah $emit dan item yang akan dipadamkan akan dihantar kepada komponen induk.

Melalui pelaksanaan kod yang begitu mudah, kami boleh melaksanakan fungsi menambah, melengkapkan dan memadam item tugasan, dan komponen boleh berkomunikasi antara satu sama lain.

Ringkasan:
Dengan menggunakan arahan v-for untuk komunikasi pemaparan senarai, kami boleh mengurus komponen kami dengan lebih fleksibel dan memudahkan komunikasi antara komponen. Dalam pembangunan sebenar, kita boleh menggunakan arahan v-untuk secara fleksibel mengikut keperluan sebenar untuk meningkatkan kecekapan pembangunan.

Di atas adalah contoh dan penjelasan penggunaan arahan v-for untuk komunikasi rendering senarai. Saya harap ia akan membantu anda memahami komunikasi komponen Vue!

Atas ialah kandungan terperinci Komunikasi komponen Vue: gunakan arahan v-untuk untuk komunikasi pemaparan senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!