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