Vue事件大小写驼峰命名导致无法执行问题解决

最新推荐文章于 2023-06-28 10:06:14 发布

鬼鬼骑士

最新推荐文章于 2023-06-28 10:06:14 发布

阅读量372

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39123467/article/details/130962151

版权

文章目录

问题
解决方案
问题大致原因

问题

驼峰命名事件名不会正常执行
在这里插入图片描述

<!DOCTYPE html>
<html lang="">
<head>
    <title>Vue Emit Example</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <child-component @customEvent="handleCustomEvent"></child-component>
    <p>Received message: {{ message }}</p>
</div>

<script>
    Vue.component('child-component', {
        template: `
          <button @click="emitCustomEvent">Trigger Custom Event</button>
        `,
        methods: {
            emitCustomEvent() {
                const data = 'Hello from Child Component!';
                console.log('emitCustomEvent')
                this.$emit('customEvent', data);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            message: ''
        },
        methods: {
            handleCustomEvent(data) {
                console.log(this.message)
                console.log(data)
                this.message = data;
            }
        }
    });
</script>
</body>
</html>

解决方案

在这里插入图片描述

问题大致原因

首先补充下基础知识：HTML是不区分大小写的。而JS区分。所以一般情况下，JS的大小写变量放到HTML中，会将大写改成小写，并在前面添加短杠。

事件名首先不存在任何自动转化大小写的能力，因此所触发的事件名称必须与监听的名称完全匹配
但是假如你想触发一个事件

this.$emit('customEvent')

<div @custom-event="fly"></div>

则监听 customEvent 名字的 custom-event 会无效

所以我们事件命名时候不要使用 camelCase 和 PascalCase 来命名了，因为就算你使用该命名，在DOM模板中还是会被自动转化为全小写

鬼鬼骑士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue事件大小写驼峰命名导致无法执行问题解决

所以我们事件命名时候不要使用 camelCase 和 PascalCase 来命名了，因为就算你使用该命名，在DOM模板中还是会被自动转化为全小写。首先补充下基础知识：HTML是不区分大小写的。所以一般情况下，JS的大小写变量放到HTML中，会将大写改成小写，并在前面添加短杠。事件名首先不存在任何自动转化大小写的能力，因此所触发的事件名称必须与监听的名称完全匹配。则监听 customEvent 名字的 custom-event 会无效。驼峰命名事件名不会正常执行。但是假如你想触发一个事件。
复制链接

扫一扫