Vue组件名称必须小写？

Question

我正在尝试在视图文件中使用组件。当我尝试使用以下方法在视图中挂载组件时，以下内容不起作用<CampaignCreate></CampaignCreate>

const app = new Vue({
    el: '#rewards-app',
    components: {
       CampaignCreate,
    }
});

如果我将其更改为：

const app = new Vue({
    el: '#rewards-app',
    components: {
       'campaign-create': CampaignCreate,
    }
});

我可以<campaign-create></campaign-create>毫无问题地将组件安装在视图文件中。我试图了解其背后的原因。我目前正在使用vuejs 2.x

Answer 1

简而言之，这是因为HTML不区分大小写。Evan You本人在2年前开启的VueJS追踪器中进行了一场大讨论，其原因如下：

因此，众所周知，HTML不区分大小写。myProp="123"被解析为myprop="123"，这导致了Vue.js中的警告，您必须使用my-prop="123"该引用将JavaScript中声明的prop引用为 myProp。这经常咬初学者。

最终该问题得以解决，并决定保持原样。这是一个有说服力的报价：

本质上，存在问题是因为js和html是不同的技术并且使用不同的命名系统。并且在两种技术中使用相同的情况（烤肉串或骆驼）会将怪异现象从一个地方转移到另一个地方，但潜在的问题将持续存在。因此，我相信，我们能做的最好是画一条线。和当前行，即。html上下文中的kebab案例和js上下文中的camelCase（和PascalCase）非常好。