【vue3入门】-【9】事件参数

事件参数

事件参数可以获取event对象和通过事件传递数据

• 获取event对象

<template>
    <h3>内联事件处理器</h3>
    
    <button @click="addCount">func-add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },

    // 所有的方法或者函数都放在这里，和data同级
    methods: {
        // event对象
        addCount(e) {
            // vue中的event对象，就是原生js的Event对象
            console.log(e.target);
            console.log(e.target.innerHTML);
            e.target.innerHTML="Add"+ this.count;
            this.count += 1
        }
    }

}
</script>

• 传递参数

<template>
    <h3>事件传参</h3>
    <!--实现点击按钮时，在控制台输出字符串hello-->
    <button @click="addCount('hello')">func-add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    // 所有的方法或者函数都放在这里，和data同级
    methods: {
        addCount(msg) {
            // 可以直接接收到传入的"hello字符串
            console.log(msg);
            this.count += 1
        }
    }
}
</script>

<template>
    <h3>事件传参</h3>
    <!--控制实现names中任意一个值时，都在console中打印对应的值-->>
    <p @click="getNamehandler(value)" v-for="(value, index) of names">{{ value }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
            names:["测试1","测试2","测试3"]
        }
    },
    // 所有的方法或者函数都放在这里，和data同级
    methods: {
        getNamehandler(msg) {
            // 可以直接接收到传入的"hello字符串
            console.log(msg);
            this.count += 1
        }
    }
}
</script>

• 传递参数过程中获取Event

<template>
    <h3>事件传参</h3>
    <!--控制实现names中任意一个值时，都在console中打印对应的值-->>
	<!--实现传递参数过程中传递event信息，event名称不允许变，否则无法正确获取数据-->
    <p @click="getNamehandler(value,$event)" v-for="(value, index) of names">{{ value }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0,
            names:["测试1","测试2","测试3"]
        }
    },
    // 所有的方法或者函数都放在这里，和data同级
    methods: {
        getNamehandler(msg,e) {
            // 可以直接接收到传入的"hello字符串
            console.log(msg);
            console.log(e.target);
            this.count += 1
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9