在vue中,如何既可以传入自定义实参值,又可以获得事件对象

在vue中,如何既可以传入自定义实参值,又可以获得事件对象。

<元素 @事件名="处理函数(实参值, e v e n t , . . . ) " > m e t h o d s : 处 理 函 数 ( 形 参 变 量 , e , . . . ) . . . 注 意 : 1. event,...)"> methods:{ 处理函数(形参变量, e, ...){ ... } } 注意: 1. event,...)">methods:(,e,...)...1.event是vue框架内置的一个关键字,先于事件处理函数获得event对象,包装起来备用。
2.变量和 $event 没有必然的顺序要求,只要上面两处变量和 $event的位置相对应即可

如下小demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:400px;
      height:300px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <!--1. 做界面-->
  <div id="app">
    <!--需求3: 点在哪个div的某个位置,喊谁的某个位置疼!
          既要传入人名,又要传入事件对象-->
    <!--                  写死字符串 关键字-->
    <div id="d1" @click="say('d1',$event)"></div>
    <div id="d2" @click="say('d2',$event)"></div>
  </div>
  <script>
    //2. 创建new Vue()对象,监视id为app的区域
    new Vue({
      el:"#app",
      //3. 创建模型对象,保存页面所需的变量和事件处理函数
      //没有变量,所以不用写data
      //但是有事件处理函数
      methods:{
        //希望在事件发生时同时获得自定义实参值和事件对象
        say(ename, e){
          console.log(`${ename}的x:${e.offsetX},y:${e.offsetY}位置疼!`);
        }
      }
    })
  </script>
</body>
</html>

你可能感兴趣的:(在vue中,如何既可以传入自定义实参值,又可以获得事件对象)