Vue组件通信（父>子）

Question

我有一个父组件（todo-list），里面有一个子组件（todo-item）。我正在尝试在父级中创建一个复选框（检查所有待办事项），以便一键检查所有待办事项。

在父组件中使用 checkAll()，它改变了子组件的 props，但它不改变子组件的数据。

这是父组件 todo-list

<template>
  <div class="todo-list-container">
    <todo-input @addTodo="addTodo"></todo-input>
    <todo-item v-for="(todo, index) in todos" 
      :key="todo.id" 
      :todo="todo" 
      :index="index" 
      :completed="todo.completed"
      @removeTodo="removeTodo"
      @changedCompleted="changedCompleted"
    ></todo-item>
    <div class="flex-container">
      <div class="button-aux-div"></div>
      <a href="#" class="todo-button">
        <input type="checkbox" :checked="!anyRemaining" @change="checkAll">
      </a>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import TodoItem from './TodoItem'
import TodoInput from './TodoInput'

export default {
  name: 'todo-list',

  components: {
    TodoItem,
    TodoInput,
  },

  data () {
    return {
      idForTodo: 3,
      todos: [
        {
          'id': '1',
          'title': 'title1',
          'body': 'body1',
          'completed': false,
        },
        {
          'id': '2',
          'title': 'title2',
          'body': 'body2',
          'completed': false,
        },
      ],
      allChecked: false,
    }
  },

  computed: {
    remaining() {
      return this.todos.filter(todo => !todo.completed).length
    },
    anyRemaining() {
      return this.remaining != 0
    }
  },

  methods: {
    addTodo(todoMessage) {
      this.todos.push({
        id: this.idForTodo,
        title: 'title' + this.idForTodo,
        body: todoMessage,
        completed: false,
      })

      this.idForTodo++;
    },

    removeTodo(data) {
      this.todos.splice(data.index, 1);
      this.idForTodo--;
    },

    changedCompleted(data) {
      this.todos.splice(data.index, 1, data.todo)
    },

    checkAll() {
      this.todos.forEach((todo) => todo.completed = event.target.checked)
    },
  },

}
</script>

这是子组件 todo-item

<template>
  <div class="todo-item-container">
    <div class="todo-title-container">
      <div class="todo-id-container">
        <div id="todo-id">
          <h2>{{ id }}</h2>
        </div>
      </div>
      <div id="todo-title"><h2>{{ title }}</h2></div>
      <div class="todo-completed-container">
        <a href="#" class="todo-button">
          <input type="checkbox" v-model="completed" @change="changedCompleted">
        </a>
      </div>
      <div class="todo-delete-container">
        <a href="#" class="todo-button" @click="deletedTodo">×</a>
      </div>
    </div>

    <hr>

    <div class="todo-body-container">
      <p id="todo-body">{{ body }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',

  props: {
    todo : {
      type: Object,
      required: true,
    },
    index : {
      type: Number,
      required: true,
    },
  },

  data () {
    return {
      'id': this.todo.id,
      'title': this.todo.title,
      'body': this.todo.body,
      'completed': this.todo.completed,
    }
  },  

  methods: {

    deletedTodo() {
      this.$emit('removeTodo', {
        'index': this.index,
        'todo': {
          'id': this.id,
          'title': this.title,
          'body': this.body,
          'completed': this.completed,
        }
      })
    },

    changedCompleted() {
      this.$emit('changedCompleted', {
        'index': this.index,
        'todo': {
          'id': this.id,
          'title': this.title,
          'body': this.body,
          'completed': this.completed,
        }
      })
    },
  },
}

</script>

Answer 1

而不是 'completed': this.todo.completed, 。 使用

computed: {
  completed () {
    return this.todo.completed
  }
}