前端Vue2-Day54

ToDoList案例：

组件间通信：

父组件给子组件传参：父组件绑定值至子标签，子组件利用props接收。

子组件给父组件传参：父组件绑定函数至子标签，子组件props接收函数，并设置methods进行进一步调用。

进行勾选操作时，由于此时数据在App组件内，故在App内定义方法修改勾选值，且改变选定事件在子组件Item内，故需要逐层传递方法至Item内部进行调用。

 -----------------App.vue----------------------
methods: {
    // 勾选or取消todo
    checkTodo(id) {
      this.todos.forEach((e) => {
        if (e.id === id) e.down = !e.down;
      });
    },
  },

------------------List.vue------------------------
<template>
  <ul class="todo-main">
    <Item v-for="todo in todos" :key="todo.id" :todo="todo" :checkTodo="checkTodo" />
  </ul>
</template>

<script>
import Item from "./Item.vue";
export default {
  name: "List",
  components: { Item },
  props:["todos", "checkTodo"]
};
</script>

------------------Item.vue-----------------------
<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.down"
        @change="handleCheck(todo.id)"
      />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
  name: "Item",
  // 接受todo对象
  props: ["todo", "checkTodo"],
  methods: {
    handleCheck(id) {
      // 改变对应down值
      this.checkTodo(id);
    },
  },
};
</script>

 这里直接可以在Item.vue内使用v-model进行checked绑定到父组件传入的down值，但不建议使用：props属性为只读属性，不能在子组件内修改！

<template>
  <li>
    <label>
      <input type="checkbox" v-model="todo.down" />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>