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

在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"}
         ]
     }
 });

运行结果：