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

爱被打了一巴掌 2023-06-09 12:30 38阅读 0赞

`[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>