Vue之中的函数命名问题

#报错

Event “createexcemple” is emitted in component but the handler is registered for “createExcemple”. Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use “create-excemple” instead of "createExcemple"的问题！！

刚学Vue没有两天，突然发现自己好low。一点小错都不知道什么问题，经过半个小时的思考之后突然想到之前有试过相关的报错类型然后改了一下居然对了。赶紧上网百度一下，问题解决
~原来是命名问题

1、组件命名
官网对组件名大小写是这么介绍的，定义组件名的方式有两种：

使用kebab-case（短横线）

在这里插入图片描述

短横线

在这里插入图片描述

使用 PascalCase（首字母大写）注册

首字母大写
但是在HTML模板中只能使用短横线

<!-- 在 html 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>

我的代码：
在这里插入图片描述

运行结果：

vue.js:603 [Vue tip]: Event "createexcemple" is emitted in component <MyButton> but the handler is registered for "createExcemple". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "create-excemple" instead of "createExcemple".
tip @ vue.js:603
Vue.$emit @ vue.js:2523
createNum @ Vue-05.html:26
invoker @ vue.js:2029
fn._withTask.fn._withTask @ vue.js:1828

报错~~~

将全部$emit()里面的createExcemple->createexcemple之后：
在这里插入图片描述

运行结果：
在这里插入图片描述

然后为了再试一下我的准确性，我再将createexcemple->Createexcemple

结果上面那个问题有出现了~~~~

最终得出在Vue中的$emit()中最好不要加大写字母，然后主要的原因还得继续深入去理解，我们下次再聊啦~~~~有兄弟知道的到时候直接在下面留言吧！！！

Vue之中的函数命名问题

猜你喜欢