v-on参数传递问题
当通过methods中定义方法,以供@click调用时,需要注意参数问题。
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去。
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.事件调用的方法没有参数 -->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<button @click="btn2Click(123)">按钮2</button>
<!-- 2.如果函数需要参数,但是没有传入,那么函数的形参为undefined -->
<button @click="btn2Click()">按钮3</button>
<!-- 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,
Vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
<button @click="btn2Click">按钮4</button>
<!-- 3.在方法定义时,我们需要event对象,同时又需要其他参数 -->
<button @click="btn3Click">按钮5</button>
<!-- 在调用方法时,如何手动的获取到浏览器参数的event对象:$event -->
<button @click="btn3Click(123,$event)">按钮6</button>
</div>
<script src="../2020-6-Vuejs/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btn1Click() {
console.log('btn1Click');
},
btn2Click(event) {
console.log('------------', event);
},
btn3Click(abc, event) {
console.log('++++++++++', abc, event);
}
}
})
</script>
</body>
</html>