Vue组件报错For recursive components, make sure to provide the “name“ option.

最新推荐文章于 2022-05-23 14:29:18 发布

数祖

最新推荐文章于 2022-05-23 14:29:18 发布

阅读量3.9k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_56098414/article/details/120960904

版权

本文介绍了在Vue.js开发过程中遇到的一个常见错误：由于组件注册的顺序不正确，导致自定义组件未被识别。通过调整Vue.component()的注册位置，将它放在Vue实例之前，解决了这个问题。文章提醒开发者注意组件定义和实例化的位置，以避免类似错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue的组件component学习中报错：

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

试了半天，竟然是js代码位置问题！

错误vue代码：

 var vm = new Vue({
     el: "#app",
     data: {
         message: "b",
         items: [
             {message: "aaa"},
             {message: "bbb"},
             {message: "ccc"}
         ]
     }
 });

 //组件必须定义在tmd Vue实例上边！！！
 Vue.component("teen",{
     props: ["msg"],
     template: "<li>{{msg.message}}</li>"
 });

将Vue.component放在Vue实例上，问题解决（无语）

Vue.component("teen",{
     props: ["msg"],
     template: "<li>{{msg.message}}</li>"
 });
 var vm = new Vue({
     el: "#app",
     data: {
         message: "b",
         items: [
             {message: "aaa"},
             {message: "bbb"},
             {message: "ccc"}
         ]
     }
 });

运行结果：