[Vue warn]: Unknown custom element: <vhead> - did you register the component correctly? For recursiv_unknown custom element: <fullcalendar>

本文链接：https://blog.csdn.net/xgy123xx/article/details/102662516

[Vue warn]: Unknown custom element: <vhead> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

出错代码

<div id="app">
        我是父组件
        <VHead />
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        VHead = {
            template: `
            <div>
            <h2>我是局部组件</h2>
            </div>
            `,
        }

        new Vue({
            el: '#app',
            data() {
                return {
                }
            },
            methods:{

            },
            components: {
                VHead,
            }
        })
    </script>

原因

因为html中，将所有内容全部转换为小写，故html中定义的VHead将自动转换为vhead,vue找不到相应的组件，即报错
当vue中的组件名是驼峰，html会自动转换为-形式
比如:myFontSize组件名，html调用 my-font-size
vHeadMain组件名，html中变为v-head-main

解决方法

方法一

修改html模板中，VHead改为v-head
<v-head />

方法二

修改vue中，使用键值的形式，将其改为小写

components: {
                VHead:vhead
}

方法三

如果是一个单词，可以只使用首字母大写
html可以识别

components: {
                VHead:vhead
}
解决方式三：
如果是一个单词，可以只使用首字母大写  
html可以识别
    <div id="app">
        我是父组件
        <Vhead />
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vhead = {
            template: `
            <div>
            <h2>我是局部组件</h2>
            </div>
            `,
        }

        new Vue({
            el: '#app',
            data() {
                return {
                }
            },
            methods:{

            },
            components: {
                Vhead,
            }
        })
    </script>