v-on的参数问题

最新推荐文章于 2022-11-10 17:35:07 发布

小草dym

最新推荐文章于 2022-11-10 17:35:07 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/qq_39368007/article/details/116463398

版权

Vue 事件处理 event对象参数传递 $event

关键词由CSDN通过智能技术生成

1.事件调用的方法没有参数

2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的,

这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法

3.方法定义时, 我们需要event对象, 同时又需要其他参数

在调用方式, 如何手动的获取到浏览器参数的event对象: $event

注：如果函数需要参数,但是没有传入, 那么函数的形参为undefined

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>

  <!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 
    这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <!--<button @click="btn2Click(123)">按钮2</button>-->
  <!--<button @click="btn2Click()">按钮2</button>-->
  <button @click="btn2Click">按钮2</button>

  <!--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
  <!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
  <button @click="btn3Click(abc, $event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn1Click() {
        console.log("btn1Click");
      },
      btn2Click(event) {
        console.log('--------', event);
      },
      btn3Click(abc, event) {
        console.log('++++++++', abc, event);
      }
    }
  })

  // 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
  // function abc(name) {
  //   console.log(name);
  // }
  //
  // abc()
</script>

</body>
</html>

小草dym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on的参数问题

1.事件调用的方法没有参数2.在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器生产的event事件对象作为参数传入到方法3.方法定义时,我们需要event对象,同时又需要其他参数在调用方式,如何手动的获取到浏览器参数的event对象:$event注：如果函数需要参数,但是没有传入,那么函数的形参为undefined<!DOCTYPE html><html lang="e...
复制链接

扫一扫