Vue学习过程中由自定义组件命名引起的错误

75 阅读 0 评论 50 点赞

我是靠谱客的博主年轻路灯，这篇文章主要介绍Vue学习过程中由自定义组件命名引起的错误，现在分享给大家，希望可以做个参考。

在运行该实例时出现了一些错误：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="myDemo">
        <showBigfont>大号字像H1一样</showBigfont>
    </div>
    <script type="text/javascript">
        Vue.component('showBigfont',{
            template:'<h1>'+
                     '<slot></slot>'
                     +'</h1>'
        })
        var myDemo=new Vue({
            el:'#myDemo',
            data:{},
        })
    </script>
</body>
</html>

错误如下：

Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the “name” option.

(found in <Root>)

最终发现仅仅是自定义组件的命名出现了问题。
上面定义的组件名为showBigfont
最终改为show-big-font时，就不在报错了，也得到了它应有的效果。

那么最后总结一下，关于自定义组件的命名的两种方式：
1.短横线分隔命名：例如：my-component my-component-name
2.驼峰式命名：例如MyComponent 注意：直接在DOM中使用时只有第一种有效。所以直接在DOM中使用自定义组件时，自定义组件名：字母全小写必须包含一个连字符。