v-on指令传参问题

使用v-on指令的时候函数的传递参数有几种情况。首先看最长见的一种
<div @click="fun"></div>
绑定事件的意思是，当你这个事件触发会执行后面的js代码。那么如果要调用函数的话，应该这样写<div @click="fun()"></div>才对。那为什么会是最开始的写法呢？实际上两种写法都可以，第二种方式就是不传参数的简写。接下来探究一下传参的几种情况。

情况一，fun函数没有形参，那么<div @click="fun"></div> 等价于<div @click="fun()"></div>

 <div id="app">
        <button @click = "fun1">点击1</button>//输出  被调用
        <button @click = "fun1()">点击2</button>//输出 被调用  效果一致
    </div>
    <script>
        let app = new Vue(
            {
               el:"#app",
               data:{
                   
               } ,
               methods:{
                   fun1(){
                       console.log("被调用");
                   }
               }
            }
        )
    </script>

情况二，fun有一个形参，那这个时候上面两种写法是不一样的，这时候存在三种写法。

   methods:{
                   
                   fun2(abc){
                       console.log(abc);
                   }
               }

  1. 当实参传入一个值的时候，那么相当于把这个值赋值给了形参。` <button @click = "fun2(123)">点击3</button>//输出 123`

2. 当我们不传参的时候，首先是第一种写法 <button @click = "fun2">点击4</button>//输出 event对象。首先要知道这个event对象是哪里来的，event对象的形成是由于你和屏幕进行交互的时候形成的，比如点击，拖拽等等。当你不进行传参的时候他会将这个event对象传给形参。 3. 当我们不传参的时候，还有一种写法就是 <button @click = "fun2()">点击5</button>//输出 undefined。两种情况是完全不一样的。

情况三，fun有多个形参，那这里的情况也挺多的。首先是都传入实参，就不说了。

 fun3(abc,def){
                       console.log(abc,def);
                   }

1. 不传实参，并且不带括号，` <button @click = "fun3">点击6</button>`这种情况就是第一个参数默认是event对象，其他参数默认是undefined
2. 不传实参，并且带括号，` <button @click = "fun3()">点击7</button>`这种情况就是所有参数都是undefined
3. 传部分实参，` <button @click = "fun3(123)">点击8</button>`这种情况就是其他形参全是unfined

总结

由上可见，只有一种情况存在传递event对象的情况，那就是我们调用函数的时候，没有括号，并且函数存在形参的时候。并且是第一个形参被这个event对象赋值。那么如果我们要主动赋值这个event对象应该怎么实现呢？**通过 $event我们可以主动获取到那个event对象，然后进行传递** `<button @click = "fun3(123,$ event)">点击8`

v-on指令的修饰符

.stop修饰符，阻止冒泡的修饰符。 <div @click.stop="fun"></div>就是阻止了这个点击事件的往上冒泡。相当于在fun函数中执行了event.stopPropagation();一样的效果
.prevent修饰符，阻止默认事件。相当于在fun函数中执行了event.preventDefault();一样的效果
.once修饰符，就是这个事件触发只会执行一次函数

Vuejs--v-on指令的函数传参问题

v-on指令传参问题

总结

v-on指令的修饰符