vue中事件绑定（和传参）

最新推荐文章于 2024-07-06 18:49:51 发布

鲤忆

最新推荐文章于 2024-07-06 18:49:51 发布

阅读量831

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129188902

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.事件绑定

v-on：事件名="函数"

简写：@事件名="函数"

元素事件监听：

1.监听哪个元素

2.什么事件

3.事件处理函数(必须是vue下自定义的函数)

在vue下如何自定义函数？

1.methods 中定义。属于选项是api

2.setuo中定义并return 输出

3.在<script setup> 直接定义 handle 在标签上绑定 @click=event=>handle(event)

<body>
    <div id="app">
        <button v-on:click="">绑定点击事件</button>
    </div>
    
    <script>
        let app=Vue.createApp({
            // methods: {
            //     handle(){
            //         console.log('handle run');
            //     }
            // },
            setup() {
                const handle=()=>{
                    console.log('handle ron');
                }
                
                return{
                    handle
                }
            }
            
        })
 
        app.mount("#app");//指定vue根模板 

        // 问题 handle 函数  能做button的事件处理函数吗？？
        // 不能   handle 是window 下的函数
        function handle() {
            console.log('handlw ren');
        }
    </script>
    
</body

2.传参

事件处理函数传参：

注意：事件对象要单独传

$event 是事件对象内置api

<body>
    <div id="app">

        <button @click="handle1">默认参数</button>

        <!-- 第一种写法  不推荐 -->
        <button @click="handle2(123,'aaaa',$event)">自定义参数</button>
            <!-- 第二种写法  推荐写法 -->
        <button @click="event=>handle2(123,'aaaa',event)">自定义参数</button>
        <!-- 
            为什么 $event 和 a 都是事件对象呢？
            因为 $event是内置api
            a在元素上定义了函数 触发时间时候执行 行内函数，默认形参赋值 事件对象
         -->

         <!-- 一个事件绑定多个业务处理函数  -->
         <button @click="[handle3,handle4]">点击触发多个函数</button>
         <button @click="event=>{handle3(),handle4()}">点击触发多个函数</button>

    </div>

    <!-- 
        所有操作的都是在虚拟dom上修改，修改完成以后会有底层算法将修改后的虚拟dom编译成真实的dom反馈给页面优化性能，使用框架性能优化 
     -->
    <script>
        let app = Vue.createApp({
            setup() {
                //默认传参事件对象
                //事件对象：记录触发事件的一个详细目录（位置，元素）

                const handle1 = (e) => {
                    console.log(e);
                    console.log(e.target);//获取出发事件的真实dom
                }
                const handle2 = (a,b,c) => {
                    console.log(a,b,c);
                }
                const handle3=()=>{
                    console.log('handle3 run');
                 
                }
                const handle4=()=>{
                    console.log('handle4 run');
                }

                return {
                    handle1,
                    handle2,
                    handle3,
                    handle4,
                }
            }

        })

        app.mount("#app");//指定vue根模板 
    </script>
</body