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>
