@click 默认传递原生的事件对象-编程知识

@click 默认传递原生的事件对象

项目场景

[Day1]

<template><div id="app"><h1>小黑记事本</h1><button @click="handleClick">www</button><div class="head"><!-- 按键（回车）按下，出发add事件，和button的事件一样 --><input@keyup.enter="add"v-model="todoName"type="text"placeholder="请输入待办事项"/><button @click="add">添加任务</button></div><section class="body"><ul><li v-for="(item, index) in todoList" :key="item.id"><span>{{ index + 1 }}</span><span class="content">{{ item.name }}</span><button @click="del">×</button></li></ul></section><div v-show="todoList.length > 0" class="footer"><span>合计：<strong>{{ todoList.length }}</strong></span><button @click="clear()">清空任务</button></div></div>
</template><script>
export default {data() {return {todoName: "",todoList: [{ id: 1, name: "吃水果" },{ id: 2, name: "喝酸奶" },],};},methods: {handleClick(clickval) {console.log("clickval", clickval);console.log("clickval.target", clickval.target);console.log("clickval.target.value", clickval.target.value);},del(tt) {console.log("tt", tt);this.todoList = this.todoList.filter((item) => item.id != tt);},add() {if (this.todoName.trim() == "") {alert("请输入内容");return;}this.todoList.unshift({id: +new Date(),name: this.todoName,});this.todoName = "";},clear() {this.todoList = [];},},
};
</script>

问题

在这段代码中，为什么在使用时没传递参数 <button @click=“del”>×，但是这里还是有参数传递进来了 del(tt) { console.log(“tt”, tt); this.todoList = this.todoList.filter((item) => item.id != tt); },

解答

在Vue中，当你在模板的某个元素上使用事件监听器（例如 @click=“del”），如果没有提供任何参数，Vue将默认传递原生的事件对象（通常表示为$event）作为参数至该方法。在你的代码中，<button @click=“del”>× 这段会在点击时自动传递点击事件的事件对象作为参数到 del 方法。
在这里插入图片描述

但是，根据你的 del 方法的实现和调用方式：

del(tt) {console.log("tt", tt);this.todoList = this.todoList.filter((item) => item.id != tt);
},

你似乎期望传入的参数是一个 id，而不是事件对象。为了使其按照期望工作，你应该在调用 del 方法时显式传递 item.id，类似这样：

<button @click="del(item.id)">×</button>

这样每个按钮就会调用 del 方法，并将其对应待办事项的 id 作为参数传进去，而不是事件对象。这将允许你根据 id 来过滤出不想要删除的待办事项。完整的 li 元素如下：

<li v-for="(item, index) in todoList" :key="item.id"><span>{{ index + 1 }}</span><span class="content">{{ item.name }}</span><button @click="del(item.id)">×</button>
</li>