vuejs2 - Vue 组件名称一定要小写吗？

Question

我正在尝试在我的 View 文件中使用一个组件。以下不起作用
当我尝试使用 <CampaignCreate></CampaignCreate> 在我的 View 中安装组件时

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

如果我将其更改为:

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

我可以在我的 View 文件中将组件挂载为 <campaign-create></campaign-create>没有问题。我试图理解这背后的原因。我目前在 vuejs 2.x

Answer 1

简而言之，这是因为 HTML 不区分大小写。有 a big discussion在 VueJS 跟踪器中由 Evan You 本人于 2 年前开设，理由如下:

So as we all know, HTML is case insensitive. myProp="123" gets parsed as myprop="123" and this has led to the caveat in Vue.js where you have to use my-prop="123" to refer to a prop declared in JavaScript as myProp. This bites beginners quite often.

该问题最终因决定保持原状而结束。这是一个有说服力的报价:

Essentially, the problem exists because js and html are different technologies and use different naming systems. And using same case(kebab or camel) in both technologies will shift weirdness from one place to another but the underlying problem will persist So I believe, best we can do is draw a line. and the current line i,e. kebab case in html context and camelCase (and PascalCase) in js context is very good.