【学习笔记】15-v-on的传递参数时注意的问题

最新推荐文章于 2024-08-27 16:02:54 发布

原创最新推荐文章于 2024-08-27 16:02:54 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

20 篇文章

订阅专栏

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

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>