VUE学习之组件命名问题

78 阅读 0 评论 52 点赞

我是靠谱客的博主合适芝麻，最近开发中收集的这篇文章主要介绍VUE学习之组件命名问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

想写一个验证props 属性的简单小例子，但写到组件的时候就出错了。

错误代码如下：

<div id="app">
<inputView></inputView>
</div>
<script>
Vue.component("inputView", {
template: "<input >"
});
let vue = new Vue({
el: "#app"
});
</script>

不能再简单了。问题出在组件名称 inputView上。网上搜索到的解释如下：

在DOM中直接调用组件（上面代码就是此种方式）

调用组件的元素全部会被全部解析为小写字母，比如<Hello-Vue></Hello-Vue>会被解析为<hello-vue></hello-vue>,然后去匹配组件名，匹配组件名顺序是：hello-vue(全小写)，helloVue(Camel Case即驼峰命名法)，HelloVue（PascalCase即帕斯卡命名法），如果能够匹配到组件，就可以使组件生效。

再回到例子中来，定义的inputView组件是在DOM中直接调用，vuejs会把<inputView>标签全部解析为小写，即inputview，然后在用自定义标签名inputview去查询组件名，因为inputview没有被‘-’分开（即input-view），所以被看成是一个单词，所以三种形式的组件名是input-view，inputView，InputView，那么就匹配不到定义的inputView组件，组件调用不生效

-----------------------------------------------------------------------------------------------------------------------------------------------------------

哈哈，刚写完就去VUE官网上看了一下。官网文档其实已经写的很明白。在组件注册部分：

https://cn.vuejs.org/v2/guide/components-registration.html

直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。