Vue.js 如何在vue js中发送带有道具的方法？我在组件中有两种方法，但其中一种不起作用？

嗨，朋友，我有个问题。 我想用Vue创建待办事项列表应用程序，我现在有3个组件： 任务组件位于任务中组件位于应用程序组件中（任务是任务的子级，任务位于应用程序的子级）

我要处理删除此任务并设置提醒此任务 我有一个任务数组，其中包含一些从app.vue传递到任务组件的对象 我在任务的对象中有一个提醒属性，该属性为布尔值

---

我希望使用handleDelete删除任务，但此函数有错误 但是 当我在应用程序组件中编写此函数时，它可以工作！ 并在工作任务中设置提醒

为什么handleDelete不在tasks组件中工作，而setReminder在其中工作

我的应用程序组件：

        <template>
      <div class="container">
        <Header title="write your task" />
        <Tasks :tasks="tasks" />
      </div>
    </template>
    
    <script>
    import Header from "./components/Header";
    import Tasks from "./components/Tasks";
    export default {
      name: "App",
      components: {
        Header,
        Tasks,
      },
      data() {
        return {
          tasks: [],
        };
      },
      methods: {
       
      },
      created() {
        this.tasks = [
          {
            id: 1,
            text: "do project",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 2,
            text: "rest",
            day: "march 3rd at 1pm",
            reminder: false,
          },
          {
            id: 3,
            text: "sleep",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 4,
            text: "running",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 5,
            text: "do homework",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 6,
            text: "go home",
            day: "january 3rd at 1pm",
            reminder: false,
          },
        ];
      },
    };
    </script>

从“/components/Header”导入标题；
从“/components/Tasks”导入任务；
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
任务，
},
数据（）{
返回{
任务：[]，
};
},
方法：{
},
创建（）{
此参数为0.tasks=[
{
id:1，
文本：“执行项目”，
日期：“3月3日下午1点”，
提醒：没错，
},
{
id:2，
正文：“休息”，
日期：“3月3日下午1点”，
提醒：错，
},
{
id:3，
文字：“睡眠”，
日期：“3月3日下午1点”，
提醒：没错，
},
{
id:4，
文本：“正在运行”，
日期：“3月3日下午1点”，
提醒：没错，
},
{
id:5，
课文：“做作业”，
日期：“3月3日下午1点”，
提醒：没错，
},
{
id:6，
文字：“回家”，
日期：“1月3日下午1点”，
提醒：错，
},
];
},
};

我的任务组件是：

<template>
  <div v-for="task in tasks" :key="task.id">
    <Task :task="task" :tasks="tasks" 
    @DeleteTask="handleDeleteTask" 
    @toggle-reminder ="setReminder"
    />
  </div>
</template>

<script>
import Task from "./Task";

export default {
  name: "Tasks",
  props: {
    tasks: Array,
  },
  components: {
    Task,
  },
  methods: {
 handleDeleteTask(id) {
      console.log(this.tasks);
      this.tasks = this.tasks.filter((i) => i.id !== id);
      console.log(this.tasks);
    },
    setReminder(id) {
      const index = this.tasks.findIndex((task) => task.id === id);
      console.log(this.tasks[index].reminder);
      this.tasks[index].reminder = !this.tasks[index].reminder;
      console.log(this.tasks[index].reminder);
    },
  },
};
</script>

从“/Task”导入任务；
导出默认值{
名称：“任务”，
道具：{
任务：数组，
},
组成部分：{
任务
},
方法：{
handleDeleteTask（id）{
console.log（this.tasks）；
this.tasks=this.tasks.filter（（i）=>i.id！==id）；
console.log（this.tasks）；
},
设置提醒（id）{
const index=this.tasks.findIndex（（task）=>task.id==id）；
console.log（this.tasks[index].提醒）；
this.tasks[index]。提醒=！this.tasks[index]。提醒；
console.log（this.tasks[index].提醒）；
},
},
};

任务组件是：

<template>
  <div
    :class="[task.reminder ? 'reminder' : '', 'task']"
    @dblclick="$emit('toggle-reminder' , task.id)"
  >
    <h3>
      {{ task.text }}
      <i class="fas fa-times" @click="this.$emit('DeleteTask', id);"></i>
    </h3>
    <p>{{ task.day }}</p>
  </div>
</template>

<script>
export default {
  name: "Task",
  props: {
    task: Object,
    tasks: Array,
  },


};
</script>

{{task.text}
{{task.day}

导出默认值{
名称：“任务”，
道具：{
任务：对象，
任务：数组，
},
};

task.id 在这里，您直接传递id，但它应该是任务。id

//From
<i class="fas fa-times" @click="this.$emit('DeleteTask', id);"></i>
//To
<i class="fas fa-times" @click="this.$emit('DeleteTask', task.id);"></i>

//来自
//到

无支柱突变 您不应该更改道具值，道具传递的任何变量都不应该被修改，它是父组件中原始变量的图像，您应该在

tasks.vue->app.vue

中设置新的发射，方法与

task.vue->tasks.vue

检查这个工作状态

命名约定 浏览器会对@DeleteTask（任务组件中的事件侦听器）感到困惑，并且不会将其链接到事件，因为对他来说，sae是@DeleteTask

您已经在烤肉串案例中命名了另一个，这就是它工作的原因

改变

@click=“this.$emit（'DeleteTask'，id）；”

要

@请单击=“this.$emit（'delete-task'，id）；”

和

@DeleteTask

删除任务

Vue文档中的命名约定表示始终使用 烤肉盒。原因是当Vue编译其HTML时， HTML不区分大小写字母

---

谢谢，我改了，但不起作用。检查链接，我解释了所有可能的问题