vue 事件传参

事件参数可以获取 event 对象和通过事件传递数据。

获取event对象

<template>
  <div>
    <button @click="addNum">累加num</button>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      num: 1
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    //e 为event对象的简写
    addNum(e){
      console.log(e);
      this.num+=1
    }
  }
}
</script>

 

事件传参 

<template>
  <div>
    <p @click="getresultHander(item)" v-for="(item,index) of result" :key="index">{{ item }}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    getresultHander(item){
      console.log(item);
      
    }
  }
}
</script>

点击列表中的元素，控制台会打印输出对应的元素值。

 

 

传参过程中获取event对象 

在方法中添加$event就可以传递event对象

<template>
  <div>
    <p @click="getresultHander(item,$event)" v-for="(item,index) of result" :key="index">{{ item }}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    getresultHander(item,e){
      console.log(item);
      console.log(e); 
    }
  }
}
</script>