v-on的参数传递问题

1.事件调用的方法没有参数，可以省略（）

image.png

2.事件调用时省略了（），但是事件处理函数需要一个参数，这时浏览器会将封装的event事件对象作为事件处理函数的参数

1.事件处理函数需要一个参数，调用时出传递123

        <div id="app">
            <button v-on:click="btn1Click(123)">1</button>
            <button>2</button>
            <button>3</button>
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    btn1Click(a) {
                        console.log(a);
                    }
                }
            })
        </script>

传递的123赋给a打印出123

image.png

2.事件处理函数需要一个参数，但是调用时没有传递参数

image.png

该参数没有被定义，是undefined

image.png

3.事件调用时省去小括号，但是事件处理函数需要一个参数

image.png

打印出a是事件对象MouseEvent{ }
事件对象是触发事件时浏览器将当下发生数据封装成的对象。

image.png
所以事件处理函数中传递的参数不要写成a，应该改成event

                methods: {
                    btn1Click(event) {
                        console.log(event);
                    }
                }

总结：
1.事件处理函数不需要传递参数时，调用时可以省略括号
2.事件处理函数需要传递参数，调用时没有传参，没有省去括号，事件处理函数中的参数被视为undefined
3.事件处理函数需要传递参数，调用时当做不需要传递参数而省去括号时，浏览器会将封装的事件对象作为事件处理函数的参数。
也就是，如果事件处理函数需要用到事件对象时，调用时要省去括号，并且事件处理函数中用来接收事件对象的参数最好写成event。

3.动态接收事件对象

image.png

浏览器封装的事件对象会自动传递给第一个参数，第二参数显示undefined

image.png

那如何动态接收事件对象，并且不影响其他参数的正常传递？

image.png

用$event传入事件

image.png