关于组件命名规范以及不规范遇到的控制台报错信息：did you register the component correctly? For recursive components, make sure to provide the "name" option.

一、组件命名：

组件命名方式目前我所知道的总共有两种，一种是驼峰命名式写法：emailTest，另一种是短横线写法：email-test。

前者只能在模板中使用，后者只能在模板中使用也能在vue实例控制的区域使用。

<!-- vm实例控制的区域 -->
    <div id="app">
        <!-- 主容器 -->
        <div class="container">
            <email-test></email-test>
        </div>
    </div>

<script>

        // 创建一个验证邮箱唯一性组件

        Vue.component('email-test', {

            template: `

                <div>

                    <div class="form-group">

                        <label>邮箱地址</label>

                        <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">

                    </div>

                    <!-- 错误 bg-danger 正确 bg-success -->

                    <p id="info"></p>

                </div>

            `

        })

</script>

 

如果前者在vue实例控制的区域使用，将会报以下错误：did you register the component correctly? For recursive components, make sure to provide the "name" option.

如图：

所以切记，在vue实例控制的区域只能使用短横线命名法。