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

运行结果:

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐