【学习笔记】15-v-on的传递参数时注意的问题_3.给事件处理函数传参 - 如果不传递任何参数,则方法无需加小括号;methods方法中可-优快云博客

本文链接：https://blog.youkuaiyun.com/wersdf22/article/details/108710664

本文详细介绍了在使用Vue的v-on指令时，关于传递参数的一些关键点。包括无参数时的用法，单参数时如何默认获取event对象，以及如何在传递多个参数时保留event对象的处理方式。配合代码示例，帮助读者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-on需要传递参数时需要注意的问题

1.当没有参数传递时，方法名称后面可以不加小括号
2.当需要传递参数时，且只有一个参数需要传递，而没有进行传递，会默认输出浏览器的event对象
3.当需要传递多个参数时，想要获取浏览器的event对象，需要在前面加$符号

代码示例

<div id="app">
<button type="button" @click="btnClick1()">按钮1</button>
<!-- v-on事件监听的时候，需要传递参数，后面才会添加小括号，没有是可以省略的 -->
<button type="button" @click="btnClick1">按钮1</button>

<button type="button" @click="btnClick2()">按钮2</button>
<!-- 没有传递参数，有小括号只输出undefined -->
<button type="button" @click="btnClick2">按钮2</button>

<!-- 当需要传递参数时，且只有一个参数需要传递，而没有进行传递，会默认输出浏览器的event对象 -->
<button type="button" @click="btnClick3(123,$event)">按钮3</button>
<!-- 当需要传递多个参数时，想要获取浏览器的event对象，需要在前面加$符号 -->
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			counter:0,
		},
		methods:{
     btnClick1(){
			console.log("btnClick1")
		 },
		btnClick2(e){
			console.log(e)
		},
		btnClick3(abc,event){
			console.log("--------",abc,event)		
		}
		},

	})
</script>