v-on传递参数的问题

v-on传递参数的问题

关于v-on的参数，详解如下：
代码如下：

    <button v-on:click="aaa()">+</button>
    <button v-on:click="bbb()">-</button>
    <button @click="ccc(222)">~</button>
    <button @click="fff(event)">#</button>
    <button @click="ddd(123,$event)">+</button>
    <button @click="eee(2,event)">%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: 666666
        },
        methods: {
            aaa: function () {
                console.log(this.message, event)
            },
            bbb: function () {
                console.log(this.message, event)
            },
            ccc: function (a, event) {
                console.log(a, event)
            },
            ddd: function (abc,event) {
                console.log(abc,event)
            },
            eee: function (a, event) {
                console.log(a, event)
            },
            fff: function () {
                console.log(event)
            }
        }
    })
</script>

1. 当事件调用的方法不带参数时，有没有括号都可以进行参数调用,所以在调用aaa,bbb两个方法时，打印结果如下：
   他们都可以调用方法并且会获得浏览器产生的event事件。
   【注】：在事件定义时写方法省略了小括号，但方法本身需要一个参数，这个时候，vue会默认将浏览器产生的event事件对象作为参数传递到方法中。

2. 当含有一个参数时，我们调用ccc,fff方法，结果如下：
   值为222时，打印结果如下：
   当值为event时，打印结果如下：
   而当我们将两个参数都进行传值时，结果如下：
   
   由此可见，如果在data中没有定义event，我们将event作为参数传进方法中时，函数会将event作为参数或者方法执行，找不到时将会报错。

3. 如何在事件调用方法时，手动获取到浏览器参数的event对象？使用**$event**。我们调用方法ddd,打印结果如下：
   
   通过此方法将可以获取到。