Vue传递带参方法及TodoList子组件删除任务功能失效问题咨询

问题原因 #

1. Task组件事件传参错误 #

你在Task组件的删除点击事件中写的是@click="this.$emit('DeleteTask', id);"，但Task组件并没有定义id这个prop，实际传递的参数是undefined，会导致删除过滤逻辑失效。

2. 子组件修改Prop的规则差异 #

Vue遵循单项数据流规范，不允许子组件直接修改父组件传递的Prop本身，两个方法的表现差异源于修改Prop的方式不同：

• setReminder方法：没有修改tasks数组本身的引用，仅修改了数组内部对象的reminder嵌套属性，Vue的单项数据流校验不会拦截这类修改，所以能正常运行（但这种写法不符合规范，项目复杂度升高后会出现数据流混乱问题）
• handleDeleteTask方法：你直接对Propthis.tasks重新赋值this.tasks = this.tasks.filter(...)，相当于直接修改Prop本身，触发Vue的校验报错，因此无法运行。
  当你把方法移到App组件时，修改的是App自身的data属性，自然不会触发报错。

修复方案 #

1. 修复Task组件的删除事件传参，同时删掉无用的tasksProp声明：

<!-- Task组件模板 -->
<i class="fas fa-times" @click="$emit('DeleteTask', task.id)"></i>

// Task组件script
export default {
  name: "Task",
  props: {
    task: Object
  }
}

2. 遵循单项数据流规范，将修改tasks的逻辑统一放到根组件App中：

// App组件script新增方法
methods: {
  handleDeleteTask(id) {
    this.tasks = this.tasks.filter((i) => i.id !== id);
  },
  setReminder(id) {
    const index = this.tasks.findIndex((task) => task.id === id);
    this.tasks[index].reminder = !this.tasks[index].reminder;
  }
}

<!-- App组件模板传递方法 -->
<Tasks :tasks="tasks" @delete-task="handleDeleteTask" @toggle-reminder="setReminder" />

<!-- Tasks组件模板中转事件，删除原来自己实现的两个修改方法 -->
<Task :task="task" 
  @DeleteTask="$emit('delete-task', $event)" 
  @toggle-reminder="$emit('toggle-reminder', $event)"
/>

内容的提问来源于stack exchange，提问作者faezeh