时间戳

首页 > 解决方案 > Vue组件名必须小写？

vuejs2 - Vue组件名必须小写？

问题描述

我正在尝试在我的视图文件中使用一个组件。当我尝试在我的视图中安装组件时，以下内容不起作用<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

标签： vuejs2

解决方案

简而言之，这是因为 HTML 不区分大小写。Evan You 本人在 2 年前在 VueJS tracker 中进行了一次大讨论，理由如下：

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

该问题最终因决定保持原样而关闭。这是一个有说服力的报价：

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

推荐阅读