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 是有效的。