Vue事件函数参数传递

最新推荐文章于 2024-05-28 14:53:08 发布

_XinXinM_

最新推荐文章于 2024-05-28 14:53:08 发布

阅读量4.8k

点赞数 1

本文链接：https://blog.csdn.net/binbinhxx/article/details/112301408

版权

函数和方法两个说法其实指的是一个意思

在这里插入图片描述

事件函数参数传递

- 普通参数和事件对象

 <button v-on:click='say("hi",123)'>Say Hi <button>

对于参数传递来说，如果要确切传递一个具体的参数，这个时候只能采用事件函数的第二种调用方式函数调用，里面可以传参，除此之外有的时候我们还需要传递事件对象就是$event。
在vue中事件对象如何传递呢？
直接通过$event，$event是固定的，它代表的就是事件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <div>{{num}}</div>
        <div>
            <!-- 按钮控制num值发生变化的时候，页面的内容肯定也是跟着变的因为数据是响应式的  -->
            <button @click = 'handle1'>点击1</button>
            <button @click = 'handle2(123,456,$event)'>点击2</button>



        </div>
    </div>
    <script type = 'text/javascript' src="vue.js"></script>
    <script>
        /*
        事件绑定-参数传递
        1、如果事件直接绑定函数名称，默认会传递事件对象作为事件函数的第一参数
        */
        // 2、如果事件绑定函数调用，事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
        var vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                handle2:function(p,p1,event) {
                    console.log(p,p1)
                    // 通过event可以拿到触发事件的对象
                    // event.target.tagName表示标签的名称
                    console.log(event.target.tagName)
                    // event.target.innerHTML获取标签的内容
                    console.log(event.target.innerHTML)

                    this.num++; 
                    
                },
                handle1: function(event){
                    console.log(event.target.innerHTML)

                }
            },
        });
    </script>
</body>
</html>