我要做的就是援用位于父组件外部的函数，就是援用props.deleteItem。 如今您能够曾经留意到，在代码示例中，我们只是编写了deleteItem而不是props.deleteItem。 这是由于我们运用了一种称为解构的技术，该技术允许我们获取props对象的一部分并将其分配给变量。 因此，在我们的ToDoItem.js文件中，我们具有以下内容：
const ToDoItem = (props) => {
const { item, deleteItem } = props;
}
这为我们创立了两个变量，一个称为item，它被分配与props.item相反的值，另一个是deleteItem，它从props.deleteItem分配了值。 我们本可以经过仅运用props.item和props.deleteItem来避免整个破坏性的事情，但是我以为值得一提！
Vue：function onDeleteItem(id) {
list.value = list.value.filter(item => item.id !== id);
}
Vue是如何做的？Vue中需求一种略有不同的办法。 我们基本上必须在这里做三件事：
首先，在元素上我们要调用函数：
<button class="ToDoItem-Delete" @click="deleteItem(item.id)"> -</button>
然后，我们必须在子组件（在本例中为ToDoItem.vue）中创立一个emit函数作为办法，如下所示：
function deleteItem(id) { emit("delete", id);}
同时，您会留意到，当我们在ToDo.vue中添加ToDoItem.vue时，我们实践上援用了一个函数：
<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
这就是所谓的自定义事情侦听器。 它会侦听在任何状况下运用字符串" delete"触发发射的状况。 假设听到此音讯，它将触发一个名为onDeleteItem的函数。 此函数位于ToDo.vue外部，而不是ToDoItem.vue中。 如前所述，此函数仅从list.value数组中过滤ID。
在这里还值得留意的是，在Vue示例中，我可以复杂地将$ emit部分写在@click监听器中，如下所示：
<button class="ToDoItem-Delete" @click="emit("delete", item.id)"> -</button>
这将使步数从3增加到2，而这完全取决于团体爱好。
简而言之，React中的子组件可以经过props来拜访父函数（前提是您要传递props，这是相当标准的做法，在其他React示例中，您会遇到少量的任务），而在Vue中，您可以 从孩子收回事情，通常将其搜集在父组件中。
我们如何传递事情监听器？ React：复杂事情（例如单击事情）的事情侦听器很复杂。 这是我们如何为创立新的ToDo项目的按钮创立click事情的示例：
<button className="ToDo-Add" onClick={createNewToDoItem}> +</button>
在这里超级复杂，简直就像我们将如何运用香草JS处置嵌入式onClick。 如Vue部分所述，每当按下Enter键时，设置事情侦听器停止处置就破费了更长的时间。 这本质上需求由输入标签处置onKeyPress事情，例如：
<input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/>
只需该函数辨认出已按下" enter"键，便会触发createNewToDoItem函数，例如：
const handleKeyPress = (e) => {
if (e.key === "Enter") {
createNewToDoItem();
}
};
Vue：在Vue中，它十分复杂明了。 我们只运用@符号，然后运用我们想要做的事情监听器的类型。 因此，例如，要添加一个click事情监听器，我们可以编写以下代码：
(责任编辑：admin)