vue click点击事件传入事件对象、自定义参数

函数调用不传参数，函数不接收参数

<div id="app">
  <button v-on:click="fun">Say hi</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            fun: function () {
                console.log(event)
            }
        }
    })
</script>

函数调用不传参数、函数不接收参数

在函数中直接使用event，可以获得事件对象，必须写成event，不然获取不到事件对象（不能写成e）

输出结果如下图

函数调用不传参数，函数接收参数

<div id="app">
  <button v-on:click="fun">Say hi</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            fun: function (ev) {
                console.log(ev)
            }
        }
    })
</script>

函数调用不传参数、函数接受一个参数

接受的参数为事件对象，输出结果如下图

函数调用传自定义参数，不传事件对象

<div id="app">
  <button v-on:click="fun(1, 2, 3)">Say hi</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            fun: function (one, two, three) {
                console.log(one, two, three, event)
            }
        }
    })
</script>

one two three 接受 1 2 3，event表示点击事件对象（只能是event，不能写成e）

函数调用传自定义参数，传事件对象

<div id="app">
  <button v-on:click="fun(1, 2, 3, $event)">Say hi</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            fun: function (one, two, three, e) {
                console.log(one, two, three, e)
            }
        }
    })
</script>

函数调用传参时：$event表示事件对象