Javascript 如何使用App.vue中的方法定位另一个组件中的按钮？

我正在制作一个基本待办应用程序，其中有一个输入字段，输入任务并按“回车”键后，任务就会出现在列表中。与任务一起，

TodoCard.vue

组件还生成一个按钮，我想用它来删除任务

我已经在按钮中添加了一个

@click=“removeTodo”

方法，但不知道该将其放置在

TodoCard

组件或

App.vue

文件的何处

TodoCard

组件：

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo(todo)">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
  this.todos.splice(this.todos.indexOf(todo), 1)
    }
  }
}
</script>

---

删除任务的代码是否正确？

您可以向家长发送一个事件，通知家长在子组件中单击了“删除”按钮

您可以在Vue中查看更多信息

下面是组件的外观：

TodoCard.vue

：

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
       this.$emit('remove')
    }
  }
}
</script>

---

您可以向父级发送事件，通知父级已单击子组件中的“删除”按钮

您可以在Vue中查看更多信息

下面是组件的外观：

TodoCard.vue

：

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
       this.$emit('remove')
    }
  }
}
</script>

---

允许父级将

@单击

处理程序传递给

TodoCard

。然后在父对象中，拼接

todos

。允许父对象将

@单击
处理程序传递到
TodoCard
。然后在父级中，splice
todos
。我从ESlint得到一个未定义的错误，说
中没有定义
key
。todos.splice（key，1）
？我从ESlint得到一个未定义的错误，说
中没有定义
key
。todos.splice（key，1）
？
<template>
  <div id="app">
    <input class="new-todo"
    placeholder="Enter a task and press enter."
    v-model="newTodo"
    @keyup.enter="addTodo">
    <TodoCard v-for="(todo, key) in todos" :todo="todo" :key="key" @remove="removeTodo(key)" />
  </div>
</template>

<script>
import TodoCard from './components/TodoCard'

export default {
  data () {
    return {
      todos: [],
      newTodo: ''
    }
  },
  components: {
    TodoCard
  },
  methods: {
    addTodo: function () {
      // Store the input value in a variable
      let inputValue = this.newTodo && this.newTodo.trim()

      // Check to see if inputed value was entered
      if (!inputValue) {
        return
      }

      // Add the new task to the todos array
      this.todos.push(
        {
          text: inputValue,
          done: false
        }
      )

      // Set input field to empty
      this.newTodo = ''
        }
      },
     removeTodo: function(key) {

       this.todos.splice(key, 1);

     }
    }
    </script>