vue事件传参

最新推荐文章于 2024-10-10 09:09:28 发布

richest_qi

最新推荐文章于 2024-10-10 09:09:28 发布

阅读量1k

点赞数 1

分类专栏： Vue2 文章标签： event 事件事件传参事件处理函数

本文链接：https://blog.csdn.net/qzw752890913/article/details/124608657

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

文章目录

事件传参

不传参

<button @click="handleClick">不传参</button>
handleClick(event){ console.log(event); }

在这里插入图片描述

<body>
    <div id="root">
        <button @click="handleClick">不传参</button>
    </div>

    <script>
    new Vue({
        el:"#root",
        methods:{
            handleClick(event){
                console.log(event);
            }
        }
    })
    </script>
</body>

只传入自己的参数

<button @click="handleClick(100)">只传入自己的参数</button>
handleClick(data){ console.log(data); }

在这里插入图片描述

<body>
    <div id="root">
        <button @click="handleClick(100)">只传入自己的参数</button>
    </div>

    <script>
    new Vue({
        el:"#root",
        methods:{
            handleClick(data){
                console.log(data);
            }
        }
    })
    </script>
</body>

既传入自己的参数，也传入event对象

<button @click="handleClick(100,$event)">既传入自己的参数，也传入event对象</button>
handleClick(data,event){ console.log(data,event); }

在这里插入图片描述

<body>
    <div id="root">
        <button @click="handleClick(100,$event)">既传入自己的参数，也传入event对象</button>
    </div>

    <script>
    new Vue({
        el:"#root",
        methods:{
            handleClick(data,event){
                console.log(data,event);
            }
        }
    })
    </script>
</body>

既传入event对象，也传入自己的参数

<button @click="handleClick($event,100)">既传入event对象，也传入自己的参数</button>
handleClick(event,data){ console.log(event,data); }

在这里插入图片描述

<body>
    <div id="root">
        <button @click="handleClick($event,100)">既传入event对象，也传入自己的参数</button>
    </div>

    <script>
    new Vue({
        el:"#root",
        methods:{
            handleClick(event,data){
                console.log(event,data);
            }
        }
    })
    </script>
</body>