vue中v-on传值总结

<div id="app">
<!--  事件调用方法没有参数时-->
  <!--  写法省略了括号 如一二效果相同 -->
  <button @click="btnclick">按钮一</button>
  <button @click="btnclick()">按钮二</button>
<!--  事件调用方法有参数-->
   <!--  方法有参数但是省略小括号 web会默认调用event事件传入到方法,可以用来拿到事件对象-->
  <button @click="btnclick2">按钮三</button>
   <!--  输出没有定义-->
  <button @click="btnclick2()">按钮四</button>
   <!--  正常输出-->
  <button @click="btnclick2(message)">按钮五</button>
<!--  方法定义时需要参数，还需要event事件对象-->
<!--  在调用方法时手动拿到event：$event-->
  <button @click="btnclick3(message,$event)">按钮六</button>
</div>
<script>
  const vu = new Vue({
    el: "#app",
    data: {
      message:"hi"
    },
    methods: {
      btnclick(){
        console.log("btnclick")
      },
      btnclick2(abc){
        console.log(abc)
      },
      btnclick3(abc,event){
        console.log(abc,event)
      }
    }
  })
</script>

 

浏览器对应输出