目录
一、问题
自定义组件todoList,在html中使用时有警告:Failed to resolve component,组件不能正常加载在页面上。
1.html代码
<ol >
<todoList></todoList>
</ol>
2.js代码
app.component("todoList",{
template:`<li>{{todo}}</li>`
})
3.警告
二、原因
vue中的组件 在html文件中使用时,组件名称 只能用 小写字母,不能包含大写字母。
三、解决
修改组件名称<todoList>为<todolist>,警告消失,组件能正常显示
1.html代码
<ol >
<todolist></todolist>
</ol>
2.js代码
app.component("todolist",{
template:`<li>todo</li>`
})
3.运行结果
四、总结
1.vue组件 在html文件中使用时 不能 含有 大写字母,否则不能正常使用组件。
定义组件时含有 大写字母,要用短横线-连接 改成小写(如:todoList组件,html中用<todo-list></todo-list>使用。
2.vue组件在vue文件中使用时,名称里可以包含大写字母。
/*
希望对你有帮助!
如有错误,欢迎指正!
*/