Vue 组件名称一定要小写吗? [英] Vue component name must be lowercase?

问题描述

我正在尝试在我的视图文件中使用一个组件.以下不起作用当我尝试使用 <CampaignCreate></CampaignCreate>

I am trying to use a component in my view file. The following doesn't work When I try to mount the component in my view with <CampaignCreate></CampaignCreate>

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

如果我把它改成:

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

我可以将组件作为 挂载在我的视图文件中，没有任何问题.我试图理解这背后的原因.我目前在 vuejs 2.x

I can mount the component in my view file as <campaign-create></campaign-create> without a problem. I am trying to understand the reason behind this. I am currently on vuejs 2.x

推荐答案

简而言之，就是因为 HTML 不区分大小写.在 VueJS 跟踪器中，有 一场大讨论 由 Evan You 本人在 2 年前开放，内容如下推理:

In short, it's because HTML is case-insensitive. There was a big discussion in VueJS tracker opened 2 years ago by Evan You himself with the following reasoning:

众所周知，HTML 不区分大小写.myProp="123" 被解析作为 myprop="123" 这导致了 Vue.js 中的警告，你必须使用 my-prop="123" 来引用在 JavaScript 中声明为的道具myProp.这经常会咬初学者.

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.

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

The issue was eventually closed with decision to stay on the same track. Here's a telling quote:

问题本质上是因为js和html不同技术并使用不同的命名系统.并使用相同的两种技术中的案例(烤肉串或骆驼)将从从一个地方到另一个地方，但潜在的问题仍然存在 所以我相信，我们能做的就是画一条线.和当前行 i，e.html上下文中的kebab case和js中的camelCase(和PascalCase)上下文非常好.

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.

这篇关于Vue 组件名称一定要小写吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！