Vue コンポーネント通信: リストレンダリング通信には v-for ディレクティブを使用します

Vue コンポーネント通信: リスト レンダリング通信には v-for ディレクティブを使用します

Vue.js では、コンポーネント通信は非常に重要な部分です。一般的に使用されるコンポーネント通信方法の 1 つは、リスト レンダリング通信に v-for 命令を使用することです。 v-for ディレクティブを使用すると、リストを簡単にレンダリングし、リスト内のコンポーネント間で通信できます。

シナリオ例:
ToDo リストをレンダリングし、項目の追加、完了、削除の機能を実装できる TodoList コンポーネントがあるとします。リスト内の各項目は個別のコンポーネントであり、これらのコンポーネントが相互に通信できるようにする必要があります。

コードの実装:
まず、各 ToDo 項目のコンテンツをレンダリングする TodoItem コンポーネントを作成する必要があります。このコンポーネントでは、props 属性を使用して、親コンポーネントから渡されたデータを受け取ることができます。

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

次に、親コンポーネントで v-for ディレクティブを使用して、ToDo リストをレンダリングし、子コンポーネントと通信する必要があります。

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

上記のコードでは、v-for ディレクティブを使用して各 TodoItem コンポーネントのレンダリングをループし、props 属性を通じて各項目を子コンポーネントに渡します。子コンポーネントの削除ボタンをクリックすると、$emit メソッドを通じてカスタム イベントがトリガーされ、削除される項目が親コンポーネントに渡されます。

このような単純なコード実装を通じて、ToDo アイテムの追加、完了、削除の機能を実装でき、コンポーネントは相互に通信できます。

概要:
リストレンダリング通信に v-for ディレクティブを使用することで、コンポーネントをより柔軟に管理し、コンポーネント間の通信を容易にすることができます。実際の開発においては、ニーズに応じて v-for 命令を柔軟に使用することができ、開発効率を向上させることができます。

上記はv-for命令を使用したリスト描画通信の例と説明です。 Vue コンポーネントの通信を理解するのに役立つことを願っています。

以上がVue コンポーネント通信: リストレンダリング通信には v-for ディレクティブを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。