[Vue warn]: Failed to resolve component: todolist at ＜App＞warn$1

目录

一、问题

二、原因

三、解决

 四、总结

---

一、问题

自定义组件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文件中使用时，名称里可以包含大写字母。

/*

希望对你有帮助！

如有错误，欢迎指正！

*/